2026-02-19T11-41-14_auto_memory/memories.db-shm, memory/memories.db-wal, me
This commit is contained in:
parent
097cbd24e4
commit
bb1cd9ebf7
@ -1031,3 +1031,8 @@
|
||||
{"timestamp":"2026-02-19T11:36:23.114Z","level":"info","category":"watcher","message":"File added","data":{"path":"/home/nicholai/.agents/memory/memories.db-wal"}}
|
||||
{"timestamp":"2026-02-19T11:36:23.116Z","level":"info","category":"watcher","message":"File changed","data":{"path":"/home/nicholai/.agents/memory/memories.db-wal"}}
|
||||
{"timestamp":"2026-02-19T11:36:23.127Z","level":"info","category":"watcher","message":"File changed","data":{"path":"/home/nicholai/.agents/memory/memories.db"}}
|
||||
{"timestamp":"2026-02-19T11:36:28.294Z","level":"info","category":"git","message":"Auto-committed","data":{"message":"2026-02-19T11-36-28_auto_memory/memories.db-shm, memory/memories.db-wal, me","filesChanged":4}}
|
||||
{"timestamp":"2026-02-19T11:37:12.009Z","level":"warn","category":"git","message":"Periodic sync failed: No git credentials found. Run `gh auth login` or set GITHUB_TOKEN secret."}
|
||||
{"timestamp":"2026-02-19T11:41:08.235Z","level":"info","category":"watcher","message":"File added","data":{"path":"/home/nicholai/.agents/memory/memories.db-shm"}}
|
||||
{"timestamp":"2026-02-19T11:41:08.235Z","level":"info","category":"watcher","message":"File added","data":{"path":"/home/nicholai/.agents/memory/memories.db-wal"}}
|
||||
{"timestamp":"2026-02-19T11:41:09.231Z","level":"info","category":"watcher","message":"File changed","data":{"path":"/home/nicholai/.agents/memory/memories.db-shm"}}
|
||||
|
||||
@ -1,85 +1,102 @@
|
||||
---
|
||||
name: signet-design
|
||||
description: [TODO: Complete and informative explanation of what the skill does and when to use it. Include WHEN to use this skill - specific scenarios, file types, or tasks that trigger it.]
|
||||
description: >
|
||||
Signet's visual design system — technical/industrial monochrome aesthetic
|
||||
with generative halftone art. Use when building or modifying UI for
|
||||
Signet products (website, dashboard, docs, pitch decks, component
|
||||
libraries). Covers design tokens, component patterns, generative
|
||||
dithering techniques, and layout principles. Trigger on any Signet
|
||||
frontend work, design brief updates, or brand-aligned UI tasks.
|
||||
---
|
||||
|
||||
# Signet Design
|
||||
# Signet Design System
|
||||
|
||||
## Overview
|
||||
## Aesthetic Direction
|
||||
|
||||
[TODO: 1-2 sentences explaining what this skill enables]
|
||||
Technical. Industrial. Near-monochrome. The visual language draws from
|
||||
blueprint schematics, CRT flight terminals, cyberpunk interfaces, and
|
||||
1-bit halftone print. It is NOT consumer SaaS, NOT Material Design,
|
||||
NOT soft/friendly.
|
||||
|
||||
## Structuring This Skill
|
||||
Core principles:
|
||||
- **Monospace-dominant** — IBM Plex Mono is the sole typeface
|
||||
- **Near-monochrome** — desaturated grays, almost no color accent
|
||||
- **Zero border-radius** — sharp 90-degree corners everywhere
|
||||
- **Outlined over filled** — stroked buttons, stroked badges
|
||||
- **System naming** — underscore convention: `Sys_Palette`, `Component_Library`
|
||||
- **Registration marks** — crosshair (+) elements as visual punctuation
|
||||
- **Generative texture** — Bayer-dithered halftone art on canvas, not decoration for decoration's sake
|
||||
|
||||
[TODO: Choose the structure that best fits this skill's purpose. Common patterns:
|
||||
## Design Tokens
|
||||
|
||||
**1. Workflow-Based** (best for sequential processes)
|
||||
- Works well when there are clear step-by-step procedures
|
||||
- Example: DOCX skill with "Workflow Decision Tree" → "Reading" → "Creating" → "Editing"
|
||||
- Structure: ## Overview → ## Workflow Decision Tree → ## Step 1 → ## Step 2...
|
||||
See `assets/globals.css` for the full token set. Key values:
|
||||
|
||||
**2. Task-Based** (best for tool collections)
|
||||
- Works well when the skill offers different operations/capabilities
|
||||
- Example: PDF skill with "Quick Start" → "Merge PDFs" → "Split PDFs" → "Extract Text"
|
||||
- Structure: ## Overview → ## Quick Start → ## Task Category 1 → ## Task Category 2...
|
||||
```
|
||||
--color-bg: #08080a (near-black)
|
||||
--color-surface: #0e0e12 (raised surface)
|
||||
--color-text: #d4d4d8 (primary text)
|
||||
--color-text-bright: #f0f0f2 (headings, emphasis)
|
||||
--color-text-muted: #3e3e46 (secondary, labels)
|
||||
--color-accent: #8a8a96 (desaturated gray-blue)
|
||||
--color-border: rgba(255,255,255,0.06)
|
||||
--color-border-strong: rgba(255,255,255,0.12)
|
||||
--font-mono: 'IBM Plex Mono', monospace
|
||||
--radius: 2px
|
||||
```
|
||||
|
||||
**3. Reference/Guidelines** (best for standards or specifications)
|
||||
- Works well for brand guidelines, coding standards, or requirements
|
||||
- Example: Brand styling with "Brand Guidelines" → "Colors" → "Typography" → "Features"
|
||||
- Structure: ## Overview → ## Guidelines → ## Specifications → ## Usage...
|
||||
Anti-patterns: saturated accent colors, rounded corners > 2px, serif
|
||||
or sans-serif body fonts, gradient fills, drop shadows.
|
||||
|
||||
**4. Capabilities-Based** (best for integrated systems)
|
||||
- Works well when the skill provides multiple interrelated features
|
||||
- Example: Product Management with "Core Capabilities" → numbered capability list
|
||||
- Structure: ## Overview → ## Core Capabilities → ### 1. Feature → ### 2. Feature...
|
||||
## Component Patterns
|
||||
|
||||
Patterns can be mixed and matched as needed. Most skills combine patterns (e.g., start with task-based, add workflow for complex operations).
|
||||
### Typography
|
||||
- All headings: uppercase, wide letter-spacing (0.04–0.08em), weight 400
|
||||
- Body: 0.8125rem, muted color
|
||||
- Labels: 0.5625rem, uppercase, 0.18em tracking, `--color-text-muted`
|
||||
- Inverted labels: white-on-black blocks (`.label-inv`)
|
||||
|
||||
Delete this entire "Structuring This Skill" section when done - it's just guidance.]
|
||||
### Buttons
|
||||
All outlined, never filled at rest. Fill on hover (invert colors).
|
||||
Four variants: primary, secondary, ghost, danger. Triangle marker
|
||||
(`.tri`) as optional leading icon.
|
||||
|
||||
## [TODO: Replace with the first main section based on chosen structure]
|
||||
### Cards & Surfaces
|
||||
`--color-surface` background, `--color-border-strong` stroke, no
|
||||
radius. Hover brightens border only.
|
||||
|
||||
[TODO: Add content here. See examples in existing skills:
|
||||
- Code samples for technical skills
|
||||
- Decision trees for complex workflows
|
||||
- Concrete examples with realistic user requests
|
||||
- References to scripts/templates/references as needed]
|
||||
### Decorative Elements
|
||||
- Crosshair marks (`.crosshair`) — 10px, muted, used as section markers
|
||||
- Vertical sidebar text (`writing-mode: vertical-rl`)
|
||||
- Numbered index grids (00–23 in 8-column grid)
|
||||
- Diagonal line accents (fixed position, rotated 45deg)
|
||||
|
||||
## Generative Art
|
||||
|
||||
The system uses canvas-based Bayer-dithered halftone for visual texture.
|
||||
See `references/generative-patterns.md` for full implementation details.
|
||||
|
||||
Three canvas layers:
|
||||
1. **Hero zone** — large organic blobs bleeding from edges (opacity 0.28)
|
||||
2. **Right edge bleed** — fixed vertical canvas, fade-in from right (opacity 0.14)
|
||||
3. **Inline section bands** — 64px-tall horizontal strips between sections (opacity 0.18)
|
||||
|
||||
Pipeline: Perlin noise → fractal Brownian motion → Bayer 4x4 ordered dither → canvas pixel fill.
|
||||
|
||||
## Layout Principles
|
||||
|
||||
- Max content width: ~820px, centered
|
||||
- Asymmetric offsets (form inputs pushed right)
|
||||
- Fixed sidebar with vertical text on left edge
|
||||
- Background crosshair field (scattered + marks at low opacity)
|
||||
- SVG noise grain overlay on `body::before` (opacity 0.04)
|
||||
- Generous section spacing (`--space-xl` padding + margin)
|
||||
- Border-bottom section dividers (single pixel, low opacity)
|
||||
|
||||
## Resources
|
||||
|
||||
This skill includes example resource directories that demonstrate how to organize different types of bundled resources:
|
||||
|
||||
### scripts/
|
||||
Executable code (Python/Bash/etc.) that can be run directly to perform specific operations.
|
||||
|
||||
**Examples from other skills:**
|
||||
- PDF skill: `fill_fillable_fields.py`, `extract_form_field_info.py` - utilities for PDF manipulation
|
||||
- DOCX skill: `document.py`, `utilities.py` - Python modules for document processing
|
||||
|
||||
**Appropriate for:** Python scripts, shell scripts, or any executable code that performs automation, data processing, or specific operations.
|
||||
|
||||
**Note:** Scripts may be executed without loading into context, but can still be read by Claude for patching or environment adjustments.
|
||||
|
||||
### references/
|
||||
Documentation and reference material intended to be loaded into context to inform Claude's process and thinking.
|
||||
|
||||
**Examples from other skills:**
|
||||
- Product management: `communication.md`, `context_building.md` - detailed workflow guides
|
||||
- BigQuery: API reference documentation and query examples
|
||||
- Finance: Schema documentation, company policies
|
||||
|
||||
**Appropriate for:** In-depth documentation, API references, database schemas, comprehensive guides, or any detailed information that Claude should reference while working.
|
||||
|
||||
### assets/
|
||||
Files not intended to be loaded into context, but rather used within the output Claude produces.
|
||||
|
||||
**Examples from other skills:**
|
||||
- Brand styling: PowerPoint template files (.pptx), logo files
|
||||
- Frontend builder: HTML/React boilerplate project directories
|
||||
- Typography: Font files (.ttf, .woff2)
|
||||
|
||||
**Appropriate for:** Templates, boilerplate code, document templates, images, icons, fonts, or any files meant to be copied or used in the final output.
|
||||
|
||||
---
|
||||
|
||||
**Any unneeded directories can be deleted.** Not every skill requires all three types of resources.
|
||||
- `assets/globals.css` — Complete design token stylesheet. Copy into
|
||||
new projects and extend. Contains tokens, reset, typography, buttons,
|
||||
inputs, badges, cards, crosshair, vertical text, and utility classes.
|
||||
- `references/generative-patterns.md` — Full Perlin noise + fbm + Bayer
|
||||
dither implementation with code. Read when implementing generative
|
||||
canvas art.
|
||||
|
||||
121
skills/signet-design/references/generative-patterns.md
Normal file
121
skills/signet-design/references/generative-patterns.md
Normal file
@ -0,0 +1,121 @@
|
||||
# Generative Patterns
|
||||
|
||||
Signet uses procedural canvas-based halftone dithering for visual
|
||||
texture. This is not decorative — it's structural to the aesthetic.
|
||||
|
||||
## Pipeline
|
||||
|
||||
```
|
||||
Perlin noise → fbm (fractal Brownian motion) → Bayer 4x4 dither → canvas pixel fill
|
||||
```
|
||||
|
||||
## Perlin Noise
|
||||
|
||||
Permutation-table-based 2D Perlin noise. Standard implementation:
|
||||
|
||||
```js
|
||||
const PERM = new Uint8Array(512);
|
||||
for (let i = 0; i < 256; i++) PERM[i] = i;
|
||||
for (let i = 255; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[PERM[i], PERM[j]] = [PERM[j], PERM[i]];
|
||||
}
|
||||
for (let i = 0; i < 256; i++) PERM[i + 256] = PERM[i];
|
||||
|
||||
function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
|
||||
function lerp(a, b, t) { return a + t * (b - a); }
|
||||
function grad(hash, x, y) {
|
||||
const h = hash & 3;
|
||||
return (h < 2 ? x : -x) + (h === 0 || h === 3 ? y : -y);
|
||||
}
|
||||
|
||||
function noise2d(x, y) {
|
||||
const xi = Math.floor(x) & 255, yi = Math.floor(y) & 255;
|
||||
const xf = x - Math.floor(x), yf = y - Math.floor(y);
|
||||
const u = fade(xf), v = fade(yf);
|
||||
const aa = PERM[PERM[xi] + yi], ab = PERM[PERM[xi] + yi + 1];
|
||||
const ba = PERM[PERM[xi + 1] + yi], bb = PERM[PERM[xi + 1] + yi + 1];
|
||||
return lerp(
|
||||
lerp(grad(aa, xf, yf), grad(ba, xf - 1, yf), u),
|
||||
lerp(grad(ab, xf, yf - 1), grad(bb, xf - 1, yf - 1), u), v
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Fractal Brownian Motion (fbm)
|
||||
|
||||
Layer multiple noise octaves for organic complexity:
|
||||
|
||||
```js
|
||||
function fbm(x, y, octaves = 4) {
|
||||
let val = 0, amp = 0.5, freq = 1;
|
||||
for (let i = 0; i < octaves; i++) {
|
||||
val += amp * noise2d(x * freq, y * freq);
|
||||
amp *= 0.5;
|
||||
freq *= 2;
|
||||
}
|
||||
return val;
|
||||
}
|
||||
```
|
||||
|
||||
## Bayer 4x4 Ordered Dither
|
||||
|
||||
The key to the halftone look. Maps continuous values to binary
|
||||
on/off using a threshold matrix:
|
||||
|
||||
```js
|
||||
const BAYER4 = [
|
||||
0, 8, 2, 10,
|
||||
12, 4, 14, 6,
|
||||
3, 11, 1, 9,
|
||||
15, 7, 13, 5,
|
||||
];
|
||||
|
||||
function ditherCanvas(canvas, noiseFn, pixelSize = 4, threshold = 0.5) {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const w = Math.floor(rect.width), h = Math.floor(rect.height);
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
const ctx = canvas.getContext('2d');
|
||||
const cols = Math.floor(w / pixelSize), rows = Math.floor(h / pixelSize);
|
||||
ctx.fillStyle = '#f0f0f2';
|
||||
for (let y = 0; y < rows; y++) {
|
||||
for (let x = 0; x < cols; x++) {
|
||||
const val = noiseFn(x, y, cols, rows);
|
||||
const bayerVal = BAYER4[(y % 4) * 4 + (x % 4)] / 16;
|
||||
if (val + (bayerVal - 0.5) * 0.4 > threshold) {
|
||||
ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize - 1, pixelSize - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Canvas Layer Recipes
|
||||
|
||||
### Hero (organic blobs from edges)
|
||||
- pixelSize: 4, threshold: 0.48, opacity: 0.28
|
||||
- Noise: two fbm layers blended 60/40, biased toward edges
|
||||
- Edge fade: `min(x/cols, 1-x/cols) * 2` for both axes
|
||||
|
||||
### Right edge bleed
|
||||
- pixelSize: 3, threshold: 0.55, opacity: 0.14
|
||||
- Fixed position, 200px wide, full viewport height
|
||||
- Noise fades in from right: multiply by `x/cols`
|
||||
|
||||
### Inline section bands
|
||||
- pixelSize: 3, threshold: 0.55–0.6, opacity: 0.18
|
||||
- Height: 64px, full width
|
||||
- Two variants: stretched horizontal ("band") and radial ("cloud")
|
||||
|
||||
## Tuning
|
||||
|
||||
- **More dots**: lower threshold (0.48 → 0.42)
|
||||
- **Fewer dots**: raise threshold (0.48 → 0.55)
|
||||
- **Larger dots**: increase pixelSize (4 → 6)
|
||||
- **More organic**: increase fbm octaves (4 → 6)
|
||||
- **More visible**: raise canvas opacity (0.14 → 0.25)
|
||||
- **Subtler**: lower canvas opacity (0.28 → 0.15)
|
||||
|
||||
Dot color should match `--color-text-bright` (#f0f0f2) on the dark
|
||||
background. Never use colored dots.
|
||||
Loading…
x
Reference in New Issue
Block a user