Skills Directory

ibelick/ui-skills

create-design-md

Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions.

1.8K installs 8.0K starsUpdated Aug 29, 2026License: MIT

Install

npx skills add ibelick/ui-skills@create-design-md

Runs in your terminal. Adds the skill globally for Claude Code, Cursor, Codex and others; add -g -y to skip prompts.

What it does

Create DESIGN.md Create a DESIGN.md for one product or coherent website. Record the design language that governs it, not every value that happens to exist. Boundaries - Modify only DESIGN.md. Do not change product source, dependencies, configuration, or generated files. - Use the DESIGN.md format contract below. Do not invent a competing schema. - Do not copy every discovered token or component into the document. - Do not convert repetition, local styling, or visual preference into product intent. 1. Choose the mode Repository mode Use when a local product repository is available. Create or…

Excerpt from the skill's own SKILL.md. Read the full file on GitHub before installing: skills run with your agent's permissions.

View source on GitHub

Before you install

Skills are plain text instructions the agent follows, sometimes with scripts. Check the source, prefer repositories with many installs and stars, and read any script it ships.

Categories

Related skills

  • fixing-motion-performance

    ibelick/ui-skills

    Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

    22K installs 8.0KDesign & UIAnimationCode review
  • baseline-ui

    ibelick/ui-skills

    Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

    19K installs 8.0KDesign & UIAnimationReact & Next.js
  • fixing-accessibility

    ibelick/ui-skills

    Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.

    18K installs 8.0KDesign & UICode review
  • fixing-metadata

    ibelick/ui-skills

    >

    15K installs 8.0KCode reviewProductivity
  • ui-skills-root

    ibelick/ui-skills

    Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.

    3.9K installs 8.0KDesign & UIAI & agents
  • improve-ui

    ibelick/ui-skills

    Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff.

    3.5K installs 8.0KDesign & UIDocumentationAI & agents

← Search skills

/skills/ibelick/ui-skills/create-design-md/