# Frontend Design Intelligence

> Ground standard or deep UI work in product category, page pattern, design dials, domain UX risks, and anti-patterns before visual direction. Produces a brief, not code or tool setup.

- Skill: `ytvee-dev/frontend-design-intelligence` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add ytvee-dev/frontend-design-intelligence`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ytvee-dev/frontend-design-intelligence/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ytvee-dev (https://skillmd.com/u/ytvee-dev)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ytvee-dev/frontend-design-intelligence

---


# Frontend Design Intelligence

## Purpose

Create a compact design intelligence brief before visual direction when a UI task needs product-category grounding, page-pattern choice, density decisions, or domain-specific anti-pattern checks.

This skill adapts design-system reasoning into the WebDev Agent Kit model without becoming a UI framework, CLI generator, or package installer.

## When To Use

Use after prompt intent routing when the task is `Standard Workflow` or `Deep Workflow` and one or more are true:

- product type, page type, audience, or user job is vague;
- the user asks for visual style, landing structure, dashboard structure, or distinctive UI direction;
- the page needs visual variance, motion, or density decisions;
- `frontend-design-director` needs better grounding before writing a Design Direction Contract.

## When Not To Use

Do not use for Fast Lookup, tiny edits, purely technical bugfixes, code implementation, live Figma inspection, package installation, or new styling systems.

## Required Context

1. Read `AGENTS.md`.
2. Read `common/prompt-intent-routing-rules.md` when workflow level is unclear.
3. Read relevant project overlays when present.
4. Read only relevant references from this skill:
   - `references/product-pattern-matrix.md`;
   - `references/design-dials.md`;
   - `references/product-anti-patterns.md`.
5. Read supplied screenshots, briefs, inspect notes, or existing route files only when they materially affect the brief.

## Tool Contract

- May read project overlays and relevant source files.
- Must not run design generators or external CLIs.
- Must not create or edit app source code.
- Must not create a global design system unless explicitly requested, and then only inside `.agents/project/**`.
- Must not use Figma MCP.

## Workflow

1. Identify product category, audience, page type, and single job.
2. If required facts are missing, infer the smallest useful assumption and label it.
3. Select a likely page pattern from the user job, not from a generic style catalog.
4. Set design dials: visual variance, motion intensity, and information density.
5. Identify domain UX risks.
6. Identify product-specific anti-patterns and generic template risks.
7. Produce a compact Design Intelligence Brief.
8. Hand off to `frontend-design-director` when visual direction is needed.

## Output Contract

Final response: return only facts that affect the user's understanding, confidence, or next action. Omit empty fields and workflow narration.

```text
Product Category
Audience
Page Type
Single Job
Recommended Page Pattern
Design Dials
Domain UX Risks
Product-Specific Anti-Patterns
Useful Subject Materials
Design Direction Handoff
```

## Validation Gates

- The brief must not prescribe a UI library, styling system, package, or animation dependency.
- The recommendation must be a starting hypothesis, not a rigid template.
- The page pattern must connect to the user job.
- Design dials must explain restraint or intensity.
- Durable records belong in local project overlays, not reusable bundle docs.

## Trigger Evals

Should trigger:

- "Ground this analytics dashboard before choosing its visual direction."
- "Choose product patterns and design dials for this AI workflow."

Should not trigger:

- "Change this button color."
- "Implement this completed Design Direction Contract."

## Reference Map

- `references/product-pattern-matrix.md`
- `references/design-dials.md`
- `references/product-anti-patterns.md`
- `skills/frontend-design-director/SKILL.md`
- `common/design-quality-rubric.md`
- `common/anti-template-defaults.md`
- `common/ui-ux-priority-checklist.md`