Research: design
Cached research evidence for design (not authority).
Purpose
Section titled “Purpose”Upgrade the repo-owned design skill into the canonical frontend/product
interface design skill for UI implementation, UX judgment, visual taste,
accessibility, motion, AI-interface patterns, and rendered proof. External
sources are evidence only, not authority or install approval.
Fold And Retain Matrix
Section titled “Fold And Retain Matrix”This change makes /design the single active repo-owned skill/catalog row for
frontend/product interface design, UI/UX taste, accessibility-facing UI proof,
rendered browser proof, and Chrome DevTools-backed interface verification.
Chrome DevTools workflows remain active as official upstream curated-external
skills from ChromeDevTools/chrome-devtools-mcp; /design uses their proof
patterns for UI work but does not own general browser debugging. Folded
non-Chrome sources are removed as active skills or curated rows after their
useful patterns are represented here and in skills/design/references/.
| Folded source | Previous primary purpose | Useful synthesis retained in /design | Removal decision |
|---|---|---|---|
chrome-devtools | General Chrome DevTools MCP page debugging, snapshots, screenshots, console and network checks. | Chrome proof default: select/create page, navigate, wait, snapshot before interaction, inspect console/network, screenshot when visual evidence matters. | Replace repo copy with the official upstream curated-external row; same /chrome-devtools command after install. |
a11y-debugging | Browser-grounded accessibility audit through snapshots, Lighthouse, focus, labels, contrast, and tap targets. | Accessibility tree as primary evidence, keyboard/focus traversal, fresh snapshots after state changes, visual focus/contrast support. | Replace repo-prefixed chrome-devtools-a11y-debugging; /design handles UI-facing proof and hands standalone work to /a11y-debugging. |
debug-optimize-lcp | LCP trace workflow, hero element discovery, waterfalls, render blocking, fix verification. | UI-facing hero/LCP proof for perceived load: identify actual visible candidate, inspect discovery/priority/lazy-loading/render delay, verify comparable conditions. | Replace repo-prefixed chrome-devtools-debug-optimize-lcp; /design keeps UI-facing heuristics and routes deep LCP work to /debug-optimize-lcp. |
memory-leak-debugging | Browser and JavaScript memory-leak reproduction with snapshots and bounded analysis. | UI lifecycle smell checks for repeated open/close surfaces, retained DOM/media/canvas resources, animation loops, and raw heap artifact guardrails. | Replace repo-prefixed chrome-devtools-memory-leak-debugging; /design performs UI smell checks and routes deep heap analysis to /memory-leak-debugging. |
troubleshooting | Chrome DevTools MCP setup, initialization, connection, page listing, missing tools, and profile issues. | Troubleshooting fallback only: record missing tools or connection blockers, do not mutate MCP config from /design, and route setup repair outside this skill. | Replace repo-prefixed chrome-devtools-troubleshooting; /design records blockers and routes setup repair to /troubleshooting. |
chrome-devtools-cli | Terminal-driven chrome-devtools CLI usage and scripts. | Optional CLI fallback when MCP tools are unavailable or the user explicitly asks for shell automation; no global installs from /design. | Replace repo copy with the official upstream curated-external row; same /chrome-devtools-cli command after install. |
baseline-ui | External baseline UI/frontend quality guidance. | Baseline UI heuristics folded into design thesis, accessibility, responsive layout, and proof gates. | Remove curated external row and research page. |
fixing-accessibility | External accessibility-fix workflow. | Labels, focus, keyboard, contrast, and semantic remediation remain in /design for UI-facing work. | Remove curated external row and research page. |
fixing-metadata | External page metadata/SEO-adjacent UI polish. | Keep only UI-facing document/title/social-preview awareness; route deep SEO outside /design. | Remove curated external row and research page. |
design-taste-frontend | External frontend taste and anti-generic guidance. | Anti-generic checks, density/variance/motion dials, and rendered iteration folded into /design. | Remove curated external row and research page. |
emil-design-eng | External design-engineering motion and polish guidance. | Motion purpose, origin, duration, interruptibility, reduced motion, and before/after audit shape folded into references. | Remove curated external row and research page. |
ui-ux-pro-max | External UI/UX brief/schema/style taxonomy. | Brief schema and platform/style reasoning retained; bulk preset taxonomy rejected. | Remove curated external row and research page. |
web-design-guidelines | External UI audit checklist for accessibility, forms, safe areas, and overflow. | Audit output contract, safe-area/long-content checks, and accessibility checks folded into /design. | Remove curated external row and research page. |
design-md, design-doc-mermaid, design-agent, design-task | External design-document or diagram/planning skills. | Boundaries clarified: non-UI design docs and architecture diagrams redirect outside /design; reusable brief memory ideas remain docs-only. | Remove curated external rows and research pages. |
react:components, reactcomponents | External React component guidance. | Component mode keeps React/shadcn/Radix/project-system precedence. | Remove curated external rows and research pages when present. |
stitch-loop, stitchgenerate-design, stitch::generate-design | External Stitch/Figma/generative design loops. | Inspiration and iteration concepts only; no hosted auth, Stitch, or Figma flows from /design. | Remove curated external rows and research pages. |
extract-design-system, tailwind-design-system | External design-system extraction/Tailwind guidance. | System mode keeps token extraction, Tailwind v4 CSS-first rules, and local precedence. | Remove curated external rows and research pages. |
sleek-design-mobile-apps | External mobile-app visual style guidance. | Mobile density, safe areas, touch targets, and responsive proof folded into /design; style pack rejected as default. | Remove curated external row and research page. |
shadcn | External shadcn skill row. | Conditional components.json, primitive reuse, and registry-aware composition folded into /design references without live registry installs. | Remove curated external row and research page. |
accessibility | External web accessibility workflow from the web-quality bundle. | UI-facing labels, semantics, keyboard, focus, contrast, and accessibility-tree proof folded into /design; broad compliance audits stay out of scope. | Remove curated external row and research page. |
building-native-ui | External Expo/native UI guidance. | Mobile safe areas, touch targets, native-feeling density, forms, media, motion, and responsive proof folded as general interface checks; Expo-specific deployment/dev-client topics stay separate. | Remove curated external row and research page. |
figma-code-connect | External Figma Code Connect/design-system sync workflow. | Design-system precedence and component/token mapping retained as concepts; live Figma/MCP credentialed workflows are excluded from /design. | Remove curated external row and research page. |
figma-generate-design | External Figma design-generation workflow. | Prompt-to-design iteration and design-system alignment retained conceptually; hosted design-file mutation is excluded from /design. | Remove curated external row and research page. |
figma-implement-design | External Figma-to-code implementation workflow. | Use supplied visual/design specs as untrusted input, preserve local tokens/components, and require rendered proof; live Figma reads remain outside /design. | Remove curated external row and research page. |
impeccable | External AI design language, detector rules, polish/audit commands, and browser iteration. | Product/brand split, design-context capture, detector vocabulary, polish/harden loop, and browser proof folded into /design; CLI/hooks/project writes rejected. | Remove curated external row and research page. |
ckm:* | Avoided bundle variants adjacent to ui-ux-pro-max, including design/brand/context/style skills. | Useful design brief/context ideas are represented by /design; broad bundled API/script surfaces remain rejected. | Remove curated external row and research page. |
add-badges | Repo-owned and globally installed README badge detection, selection, preview, marker insertion, and validation workflow. | Badge Surface mode, dynamic endpoint preference, marker safety, grouped preview, private-repo/public-API guardrails, icon/style consistency, style/layout rules, dead-service replacements, bounded validation, and scanner badge signals. | Remove custom skill directory, .agents projection, global installed skill copy, authoring row, generated catalog page, and research page. |
shieldcn-badges | Curated external and globally installed ShieldCN badge-generation skill for shadcn-like README/docs badge visuals. | Optional ShieldCN provider guidance, .svg URL rule, accessible alt text, real links, light/dark readability, URL/provider rules, and no live install/tooling from /design. | Remove curated external row, .agents projection, global installed skill copy, authoring row, generated catalog page, and research page after synthesis. |
Adjacent retained skills stay separate by primary domain: api-designer,
docs-steward, draw-thing, i18n-localization, performance-profiler,
security-scanner, test-architect, and review. /design may cite them as
handoffs for non-UI API design, docs-site maintenance, image-generation-only
work, localization-only work, deep non-UI performance profiling, security,
test strategy, or code review.
Rows audited but retained because their primary purpose is not frontend/UI/UX
design: core-web-vitals and web-quality-audit for full Lighthouse/web
quality, vercel-labs-agent-browser-all for broad browser automation, and
deployment-pipeline-design for DevOps pipeline architecture.
Source Matrix
Section titled “Source Matrix”| Source | Useful Pattern | Trust / Risk | Target |
|---|---|---|---|
| maxbogo/awesome-ai-tools-for-ui | Ecosystem map for design/taste skills, component tools, MCP/plugins, AI design apps, and resources. | Index only; no install authority. | Docs coverage and source discovery. |
| finfin/awesome-frontend-skills | Frontend skill taxonomy: frameworks, UI libraries, design, animation, testing, quality. | Index only; each child source needs separate audit. | Docs coverage and source discovery. |
| addyosmani/agent-skills | Skills as repeatable processes with triggers, checkpoints, red flags, and verification gates. | MIT metadata observed by research lane; still inspect before install. | SKILL.md process shape. |
| addyosmani/web-quality-skills | Lighthouse, Core Web Vitals, WCAG, SEO, performance quality gates. | Multi-skill surface; route deep web-quality work rather than duplicate it. | Scope boundaries and routing. |
| Impeccable | Product vs brand split, design-context capture, polish and harden loops, detector-style scanning. | High executable surface: npm CLI, hooks, browser/URL scans, local config writes. | Synthesize vocabulary and scanner ideas only. |
| Taste Skill | Brief inference, anti-generic checks, density/variance/motion dials. | Broad external bundle; inspect before install. | Design thesis and evals. |
| Anthropic frontend-design | Visual thesis before code; subject-grounded, distinctive choices. | Low executable risk; Apache-2.0 source noted by research lane. | SKILL.md workflow and expressive-surface guidance. |
| Bencium Marketplace | Controlled/innovative UX modes and phased audit patterns. | Marketplace/plugin scope; “always ask” conflicts with repo fast path. | Docs-only synthesis and selective audit structure. |
| UserInterface.wiki Skill and wiki | Category-prefixed UI rules and file/line review findings. | Full site/app has broader package/script surface; audit selected skill subtree first. | Reference taxonomy and audit output. |
| Make Interfaces Feel Better | Micro-polish: optical alignment, tabular numbers, hit areas, text wrapping, interruptible transitions. | Small MIT docs skill per research lane; still trust-gated before promotion. | Motion/polish reference and scanner tests. |
| Emil Kowalski Skill | Motion decision framework and before/after/why audit table. | License/provenance needs confirmation before catalog promotion. | Motion gate and audit format. |
| Zajno Motion | Motion vocabulary: easing, masking, scale, parallax, menu transitions. | Docs-only inspiration; no reusable content license found. | Motion terminology only. |
| Laws of UX | Cognitive-load, grouping, choice, target-size, feedback heuristics. | CC BY-NC-ND noted by research lane; paraphrase only. | laws-of-ux.md heuristics. |
| shadcn/ui skills | Project-aware components.json, primitives, registry-aware component composition. | Official MIT project; CLI can fetch registries and mutate files. | shadcn reference and scanner components.json signal. |
| Vercel web-design-guidelines | Terse UI audit checks for accessible names, focus, forms, safe areas, overflow, motion. | Remote fetched markdown is untrusted; re-express durable checks locally. | Audit contract and scanner signals. |
| TypeUI Design Skills | Design-system precedence and style-brief structure. | Hosted tools/provider writes and licensing ambiguity. | Docs-only brief pattern. |
| Designer Skills Collection | Discover, frame, design, systemize, critique, handoff lifecycle. | Very large bundle; needs command/hook/source audit before promotion. | Workflow decomposition. |
| YC Web Design Strategy | Five-second clarity, proof, CTA hierarchy, stage-aware landing strategy. | Low-adoption derivative skill; use as checklist inspiration. | Marketing/landing reference. |
| Swiss Design System | Grid discipline, whitespace, restrained accent, editorial clarity. | Opinionated aesthetic; may include font/network/Tailwind patterns to adapt. | Optional aesthetic preset. |
| Three.js Skills | Modular 3D concepts: scene, camera, renderer, loaders, animation, interaction. | License/provenance/install shape unclear in research; docs-only. | Optional threejs-immersive.md. |
| Awesome DESIGN.md | Project-local design memory and inspiration abstraction. | Brand/trademark/copyright-derived systems; do not copy trade dress. | Inspiration and design brief guidance. |
| Craftwork | Curated visual references and premium design resources. | Inspiration only; no copying visuals or proprietary assets. | Visual inspiration workflow. |
| The Shape of AI | Wayfinders, tuners, governors, trust builders, provenance and AI workflow affordances. | CC-BY-NC-SA noted by research lane; concept-level use only. | ai-ux-patterns.md. |
| OpenAI delightful frontends | Real content, visual references, constraints, visual thesis, rendered iteration. | Technique source; do not turn model-specific advice into hard policy. | Prompting and rendered-proof workflow. |
repo/global add-badges skill | Detect/select/present/insert badge workflow, shields.io dynamic endpoint discipline, marker placement, approval gates, style/layout catalog, dead-service replacements, and badge URL validation. | Overlapping badge skill; folded and removed to avoid parallel README badge skill surfaces. | badge-systems.md, scanner badge fields, evals, fold/remove docs. |
repo/global shieldcn-badges skill | ShieldCN badge URL style, .svg guidance, query parameters, provider examples, and compact visual rules. | External installed skill used as evidence; removed as a standalone skill after synthesis per consolidation request. | badge-systems.md, evals, curated-row removal note. |
Post-Audit Refinement
Section titled “Post-Audit Refinement”The refinement pass after the initial consolidation addressed the
skill-creator audit gaps by adding explicit classification gates, scaling
strategy, progressive disclosure, and state-management rules to SKILL.md.
Reference files were strengthened with concrete failure modes, proof
expectations, handoffs, and badge-surface guidance so the body can stay compact.
Scanner changes are additive and deterministic: proof readiness, artifact/noise
risk, README badge block state, badge provider/style/dead-service signals,
badge URL samples, and summarized accessibility/motion/text risks. Evals now
check structural gates, review-style audit output, state containment, and the
folded badge workflows rather than only mode names.
Accepted Patterns
Section titled “Accepted Patterns”- Treat design as a workflow, not a style dump.
- Split product/tool surfaces from brand/editorial/marketing surfaces.
- State a short design read before non-trivial code.
- Preserve existing design systems before inventing a new one.
- Put deep rules in references, not in the always-loaded skill body.
- Use local static scanning for deterministic signals, and browser proof for rendered truth.
- Keep AI interfaces honest with provenance, controls, state, and recovery.
- Use inspiration by abstracting traits, never by copying trade dress.
Rejected Or Deferred
Section titled “Rejected Or Deferred”- No wholesale vendoring of third-party skills.
- No live installs, hosted MCP setup, TypeUI pull, Stitch/Figma auth flow, or
wagents skills sync --apply. - No default Three.js/3D layer for ordinary UI.
- No single aesthetic pack as the default design voice.
- No remote fetched guidelines as trusted instructions.
- No full Lighthouse/web-quality ownership; route deep audits to dedicated quality/performance/accessibility/SEO skills.
- No project hooks until a separate OpenSpec change and maintainer approval.
Implementation Mapping
Section titled “Implementation Mapping”| Target | Change |
|---|---|
SKILL.md | Canonical name: design, /design dispatch, compact workflow, scope boundaries, design thesis, proof gate. |
| References | Add design briefs, inspiration, UX heuristics, AI UX, motion, rendered proof, and 3D guidance. |
| Scanner | Add root discovery, ignores, components.json, a11y, motion, overflow/text, token/font/direction, badge, artifact/noise, risk-summary, and proof-readiness signals. |
| Evals | Cover dashboard restraint, expressive brand work, AI interface controls, motion decisions, rendered proof, no-copy inspiration, classification gates, progressive disclosure, state management, folded badge workflows, and non-UI refusal. |
| Catalog | Publish as repo-owned custom design; do not promote new external rows from this research alone. |
| Docs | Keep this page as evidence with explicit trust notes and rejected patterns. |