From mddesign
Continuously bridges DESIGN.md into the active planning phase. When the user is working on a UI phase, reads the project's DESIGN.md, extracts the relevant token slice, and appends it to findings.md under "## Design Context" so the agent sees design constraints in its attention window. Never edits DESIGN.md, never edits task_plan.md. Idles when DESIGN.md is absent.
npx claudepluginhub othmanadi/mddesign --plugin mddesignThis skill is limited to using the following tools:
Runtime companion. Lives between `DESIGN.md` and `findings.md`.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Runtime companion. Lives between DESIGN.md and findings.md.
You are running this skill when ANY of the following is true:
task_plan.md mentions UI keywords (button, card, modal, layout, color, typography, spacing, dialog, navigation, form, input, page, screen, theme, brand, design, component, header, footer, sidebar, hero, cta).Write or Edit against a file matching *.tsx|*.jsx|*.vue|*.svelte|*.html|*.css|*.scss./mddesign:inject.DESIGN.md at the project root (CWD)./mddesign:harvest to generate one from your codebase."DESIGN.md once.findings.md.## Design Context (case-sensitive).The block format:
## Design Context
> Auto-injected by MDDesign on <ISO timestamp>. Source: DESIGN.md.
> Phase trigger: <phase id or "manual">
### Tokens in scope
<bulleted list of token references with values, format `colors.primary = #3B82F6`>
### Component specs in scope
<for each touched component, copy its spec from DESIGN.md verbatim>
### Do's and Don'ts (relevant excerpt)
<copy the relevant Do/Don't lines from DESIGN.md if any>
> If you stray from these tokens, name the deviation explicitly in findings.md before writing code.
Edit with the old block as old_string and your new block as new_string.Edit to append: old_string is the file's last existing line, new_string is the same line followed by \n\n## Design Context\n....Write or Edit DESIGN.md. Reading only. Harvest is a different skill.Write or Edit task_plan.md. Read only.### Open token questions in findings.md.task_plan.md Phase 3 says "Build the primary CTA button on the landing page." DESIGN.md declares colors.primary = #4F46E5, components.button.backgroundColor = {colors.primary}, rounded.md = 6px. After this skill runs, findings.md gains:
## Design Context
> Auto-injected by MDDesign on 2026-04-23T10:14:00Z. Source: DESIGN.md.
> Phase trigger: phase-3
### Tokens in scope
- `colors.primary = #4F46E5`
- `colors.text-on-primary = #FFFFFF`
- `rounded.md = 6px`
- `typography.button = { fontFamily: Inter, fontSize: 16px, fontWeight: 600 }`
### Component specs in scope
**Button** (from DESIGN.md):
- backgroundColor: `{colors.primary}`
- textColor: `{colors.text-on-primary}`
- typography: `{typography.button}`
- rounded: `{rounded.md}`
- hover.backgroundColor: `{colors.primary-700}`
### Do's and Don'ts (relevant excerpt)
- Always use the primary color for the main page CTA.
- Never set fontSize on buttons outside the declared typography.button token.
> If you stray from these tokens, name the deviation explicitly in findings.md before writing code.
The agent now sees these constraints on every subsequent prompt because findings.md is in the planning-with-files attention loop.