[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M76VJBHER6PSQC4ACSN4QHNF":3,"skill-same:01M76VJBHER6PSQC4ACSN4QHNF":85},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":28,"commitSha":29,"skillDirectory":30,"forksCount":31,"repositoryHtmlUrl":32,"repositoryHomepageUrl":6,"ownerHtmlUrl":33,"ownerBlogUrl":6,"ownerDescription":34,"updatedAt":35,"install":36,"resources":49},"01M76VJBHER6PSQC4ACSN4QHNF","interface-design",null,"Design engineering patterns for consistent UI: craft, memory, and systematic consistency. Trigger: When building dashboards, apps, tools, admin panels - not marketing sites.","davidcoachdev\u002Fdcfiles","davidcoachdev","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F69812733?v=4","01M758C4BR16TAV1N47W319E9V","David H. Caycedo Blum.","01M758C4CCZA2ZYGA0BGMXCDRH",1,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Finterface-design\u002FSKILL.md",[],[],"2026-11-12 13:55:43",false,"---\nname: interface-design\ndescription: >\n  Design engineering patterns for consistent UI: craft, memory, and systematic consistency.\n  Trigger: When building dashboards, apps, tools, admin panels - not marketing sites.\nlicense: Apache-2.0\nmetadata:\n  author: gentleman-programming\n  version: \"1.0\"\n---\n\n## When to Use\n\n- Building dashboards, admin panels, SaaS tools\n- Creating consistent UI components\n- Need systematic spacing\u002Fdepth\u002Fcolor decisions\n- Want design decisions remembered across sessions\n\n## Core Principle\n\n**Decisions compound.** A spacing value chosen once becomes a pattern. A depth strategy becomes an identity. Consistency beats perfection.\n\n## Design Directions\n\n### 1. Precision & Density\n\n- **Feel**: Tight, technical, monochrome\n- **Use**: Developer tools, admin dashboards\n- **Depth**: Borders-only\n- **Surfaces**: Minimal elevation shifts\n\n### 2. Warmth & Approachability\n\n- **Feel**: Generous spacing, soft shadows\n- **Use**: Collaborative tools, consumer apps\n- **Depth**: Subtle shadows\n- **Surfaces**: Soft elevation\n\n### 3. Sophistication & Trust\n\n- **Feel**: Cool tones, layered depth\n- **Use**: Finance, enterprise B2B\n- **Depth**: Layered surfaces\n- **Surfaces**: Multi-level elevation\n\n### 4. Boldness & Clarity\n\n- **Feel**: High contrast, dramatic space\n- **Use**: Modern dashboards, data-heavy apps\n- **Depth**: Strong borders + shadows\n- **Surfaces**: Clear hierarchy\n\n### 5. Utility & Function\n\n- **Feel**: Muted, functional density\n- **Use**: GitHub-style tools\n- **Depth**: Minimal\n- **Surfaces**: Flat with borders\n\n### 6. Data & Analysis\n\n- **Feel**: Chart-optimized, numbers-first\n- **Use**: Analytics, BI tools\n- **Depth**: Dense information\n- **Surfaces**: Compact\n\n## System File\n\nCreate `.interface-design\u002Fsystem.md` to persist decisions:\n\n```markdown\n# Design System\n\n## Direction\nPersonality: Precision & Density\nFoundation: Cool (slate)\nDepth: Borders-only\n\n## Tokens\n### Spacing\nBase: 4px\nScale: 4, 8, 12, 16, 24, 32\n\n### Colors\n--foreground: slate-900\n--secondary: slate-600\n--accent: blue-600\n\n## Patterns\n### Button Primary\n- Height: 36px\n- Padding: 12px 16px\n- Radius: 6px\n- Usage: Primary actions\n\n### Card Default\n- Border: 0.5px solid\n- Padding: 16px\n- Radius: 8px\n```\n\n## Critical Patterns\n\n### Depth Strategy: Borders-Only\n\n```css\n\u002F* Clean, technical depth *\u002F\n.card {\n  border: 0.5px solid rgba(255,255,255,0.06);\n  background: #1a1a1a;\n}\n```\n\n### Surface Scale (Dark)\n\n| Level | Background | Use |\n|-------|------------|-----|\n| Base | #0f0f0f | Page background |\n| Subtle | #1a1a1a | Cards |\n| Elevated | #242424 | Hover states |\n| Active | #2d2d2d | Active\u002Fpressed |\n\n### Spacing Scale\n\nUse 4px base:\n\n```\n4px   - Tight elements\n8px   - Related elements\n12px  - Component internal\n16px  - Card padding\n24px  - Section gaps\n32px  - Major sections\n```\n\n### Color Tokens\n\n```css\n\u002F* Always define semantic roles *\u002F\n--foreground: slate-900;\n--foreground-muted: slate-600;\n--background: white;\n--background-subtle: slate-50;\n--accent: blue-600;\n--accent-muted: blue-50;\n--border: slate-200;\n--border-subtle: rgba(0,0,0,0.05);\n```\n\n### Component Consistency\n\n| Component | Rule |\n|-----------|------|\n| **Buttons** | Fixed height (36px), consistent padding |\n| **Inputs** | Same height as buttons, clear focus |\n| **Cards** | Consistent padding (16px), border-radius (8px) |\n| **Spacing** | Never random - use scale |\n\n## Anti-Patterns\n\n- ❌ Random spacing (14px, 17px, 22px...)\n- ❌ Button heights drifting (36px, 38px, 40px...)\n- ❌ Inconsistent border-radius\n- ❌ No depth strategy\n- ❌ Mixing surface treatments\n\n## Workflow\n\n### New Project\n\n1. Determine design direction from context\n2. State direction choices before building\n3. Apply consistent spacing\u002Fdepth\u002Fcolors\n4. Offer to save system.md\n\n### Existing System\n\n1. Load .interface-design\u002Fsystem.md\n2. Use established patterns\n3. Maintain consistency\n4. Add new patterns as needed\n\n## Commands\n\n```bash\n# Create system file directory\nmkdir -p .interface-design\n\n# Save system\n# (manual - write to .interface-design\u002Fsystem.md)\n```\n\n## Resources\n\nSee `references\u002F` for detailed guides and code examples in `assets\u002F`.\n\n## External Resources\n\n- [Official Documentation]","## When to Use\n\n- Building dashboards, admin panels, SaaS tools\n- Creating consistent UI components\n- Need systematic spacing\u002Fdepth\u002Fcolor decisions\n- Want design decisions remembered across sessions\n\n## Core Principle\n\n**Decisions compound.** A spacing value chosen once becomes a pattern. A depth strategy becomes an identity. Consistency beats perfection.\n\n## Design Directions\n\n### 1. Precision & Density\n\n- **Feel**: Tight, technical, monochrome\n- **Use**: Developer tools, admin dashboards\n- **Depth**: Borders-only\n- **Surfaces**: Minimal elevation shifts\n\n### 2. Warmth & Approachability\n\n- **Feel**: Generous spacing, soft shadows\n- **Use**: Collaborative tools, consumer apps\n- **Depth**: Subtle shadows\n- **Surfaces**: Soft elevation\n\n### 3. Sophistication & Trust\n\n- **Feel**: Cool tones, layered depth\n- **Use**: Finance, enterprise B2B\n- **Depth**: Layered surfaces\n- **Surfaces**: Multi-level elevation\n\n### 4. Boldness & Clarity\n\n- **Feel**: High contrast, dramatic space\n- **Use**: Modern dashboards, data-heavy apps\n- **Depth**: Strong borders + shadows\n- **Surfaces**: Clear hierarchy\n\n### 5. Utility & Function\n\n- **Feel**: Muted, functional density\n- **Use**: GitHub-style tools\n- **Depth**: Minimal\n- **Surfaces**: Flat with borders\n\n### 6. Data & Analysis\n\n- **Feel**: Chart-optimized, numbers-first\n- **Use**: Analytics, BI tools\n- **Depth**: Dense information\n- **Surfaces**: Compact\n\n## System File\n\nCreate `.interface-design\u002Fsystem.md` to persist decisions:\n\n```markdown\n# Design System\n\n## Direction\nPersonality: Precision & Density\nFoundation: Cool (slate)\nDepth: Borders-only\n\n## Tokens\n### Spacing\nBase: 4px\nScale: 4, 8, 12, 16, 24, 32\n\n### Colors\n--foreground: slate-900\n--secondary: slate-600\n--accent: blue-600\n\n## Patterns\n### Button Primary\n- Height: 36px\n- Padding: 12px 16px\n- Radius: 6px\n- Usage: Primary actions\n\n### Card Default\n- Border: 0.5px solid\n- Padding: 16px\n- Radius: 8px\n```\n\n## Critical Patterns\n\n### Depth Strategy: Borders-Only\n\n```css\n\u002F* Clean, technical depth *\u002F\n.card {\n  border: 0.5px solid rgba(255,255,255,0.06);\n  background: #1a1a1a;\n}\n```\n\n### Surface Scale (Dark)\n\n| Level | Background | Use |\n|-------|------------|-----|\n| Base | #0f0f0f | Page background |\n| Subtle | #1a1a1a | Cards |\n| Elevated | #242424 | Hover states |\n| Active | #2d2d2d | Active\u002Fpressed |\n\n### Spacing Scale\n\nUse 4px base:\n\n```\n4px   - Tight elements\n8px   - Related elements\n12px  - Component internal\n16px  - Card padding\n24px  - Section gaps\n32px  - Major sections\n```\n\n### Color Tokens\n\n```css\n\u002F* Always define semantic roles *\u002F\n--foreground: slate-900;\n--foreground-muted: slate-600;\n--background: white;\n--background-subtle: slate-50;\n--accent: blue-600;\n--accent-muted: blue-50;\n--border: slate-200;\n--border-subtle: rgba(0,0,0,0.05);\n```\n\n### Component Consistency\n\n| Component | Rule |\n|-----------|------|\n| **Buttons** | Fixed height (36px), consistent padding |\n| **Inputs** | Same height as buttons, clear focus |\n| **Cards** | Consistent padding (16px), border-radius (8px) |\n| **Spacing** | Never random - use scale |\n\n## Anti-Patterns\n\n- ❌ Random spacing (14px, 17px, 22px...)\n- ❌ Button heights drifting (36px, 38px, 40px...)\n- ❌ Inconsistent border-radius\n- ❌ No depth strategy\n- ❌ Mixing surface treatments\n\n## Workflow\n\n### New Project\n\n1. Determine design direction from context\n2. State direction choices before building\n3. Apply consistent spacing\u002Fdepth\u002Fcolors\n4. Offer to save system.md\n\n### Existing System\n\n1. Load .interface-design\u002Fsystem.md\n2. Use established patterns\n3. Maintain consistency\n4. Add new patterns as needed\n\n## Commands\n\n```bash\n# Create system file directory\nmkdir -p .interface-design\n\n# Save system\n# (manual - write to .interface-design\u002Fsystem.md)\n```\n\n## Resources\n\nSee `references\u002F` for detailed guides and code examples in `assets\u002F`.\n\n## External Resources\n\n- [Official Documentation]",{"name":5,"license":15,"metadata":24,"description":27},{"author":25,"version":26},"gentleman-programming","1.0","Design engineering patterns for consistent UI: craft, memory, and systematic consistency. Trigger: When building dashboards, apps, tools, admin panels - not marketing sites.\n","main","5dc86f90a5cbe45db3acd917825461b3ed6937fb","config\u002F.config\u002Fopencode\u002Fskills\u002Finterface-design",0,"https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev","🌐 Apasionado por crear soluciones web escalables y eficientes. \r\n🧑‍🏫 Coach Dev.\r\n💻 Frontend Dev. \r\n🎚️Backend Dev.\r\n📊 Agile\u002FScrum.\r\n🚀100% remoto.","2026-08-26 07:28:05",{"source":8,"skillName":5,"commands":37,"prompt":47,"zipAvailable":48},[38,41,44],{"tool":39,"command":40},"npx","npx skills add davidcoachdev\u002Fdcfiles --skill interface-design",{"tool":42,"command":43},"bunx","bunx skills add davidcoachdev\u002Fdcfiles --skill interface-design",{"tool":45,"command":46},"pnpm","pnpm dlx skills add davidcoachdev\u002Fdcfiles --skill interface-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Finterface-design\u002FSKILL.md",true,[50,56,62,66,70,74,78,82],{"path":51,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":54,"sourceHtmlUrl":55},".skill-meta.json","REFERENCE","参考文档",413,"https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Finterface-design\u002F.skill-meta.json",{"path":57,"resourceType":58,"resourceTypeDesc":59,"sizeBytes":60,"sourceHtmlUrl":61},"assets\u002F01-component.tsx","ASSET","资产文件",42,"https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Finterface-design\u002Fassets\u002F01-component.tsx",{"path":63,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":64,"sourceHtmlUrl":65},"README.md",431,"https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Finterface-design\u002FREADME.md",{"path":67,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":68,"sourceHtmlUrl":69},"references\u002F01-consistency.md",73,"https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Finterface-design\u002Freferences\u002F01-consistency.md",{"path":71,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":72,"sourceHtmlUrl":73},"references\u002F01-principles.md",45,"https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Finterface-design\u002Freferences\u002F01-principles.md",{"path":75,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":76,"sourceHtmlUrl":77},"references\u002F02-implementation.md",36,"https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Finterface-design\u002Freferences\u002F02-implementation.md",{"path":79,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002F02-memory.md",72,"https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Finterface-design\u002Freferences\u002F02-memory.md",{"path":83,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":80,"sourceHtmlUrl":84},"references\u002F03-feedback.md","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Finterface-design\u002Freferences\u002F03-feedback.md",[86,93,100,107,115,122],{"skillNo":87,"name":88,"nameZh":6,"description":89,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":92,"publishedAt":19},"01M7740FETMZY1VTYAEFY1TWY7","zustand-5","Zustand 5 state management patterns. Trigger: When managing React state with Zustand.","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Fzustand-5\u002FSKILL.md",[],[],{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":19},"01M773ZZM9V68SA1AKP4WF4J29","zod-4","Zod 4 schema validation patterns. Trigger: When using Zod for validation - breaking changes from v3.","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Fzod-4\u002FSKILL.md",[],[],{"skillNo":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":106,"publishedAt":19},"01M773ZJFR90CQAY0N9QR40QVP","x-bookmark-quote-posts","Workflow para revisar bookmarks de X\u002FTwitter y convertirlos en drafts de quote posts. Accede a la sección de bookmarks vía browser headless, extrae posts recientes, y genera drafts con voz personal del usuario. No publica ni muta X — solo genera contenido para revisión. Trigger: X bookmarks, Twitter bookmarks, quote posts, bookmark automation, crear quote posts, revisar bookmarks, growth content X.","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Fx-bookmark-quote-posts\u002FSKILL.md",[],[],{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":111,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":114,"publishedAt":19},"01M773Z2RGV3786FV310SDB0YD","writing-skills","Use when creating new skills, editing existing skills, or verifying skills work before deployment","MIT","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Fwriting-skills\u002FSKILL.md",[],[],{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":111,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":19},"01M773YJH3KDSW467CSS63CSRJ","writing-plans","Use when you have a spec or requirements for a multi-step task, before touching code","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Fwriting-plans\u002FSKILL.md",[],[],{"skillNo":123,"name":124,"nameZh":6,"description":125,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":126,"categories":127,"keywords":128,"publishedAt":19},"01M773Y3S3H2CPRK5S8YFHWB5C","work-unit-commits","Plan commits as reviewable work units. Trigger: implementation, commit splitting, chained PRs, or keeping tests and docs with code.","https:\u002F\u002Fgithub.com\u002Fdavidcoachdev\u002Fdcfiles\u002Fblob\u002Fmain\u002Fconfig\u002F.config\u002Fopencode\u002Fskills\u002Fwork-unit-commits\u002FSKILL.md",[],[]]