Run any Skill in Manus with one click

frontend-agent

Stars18

Forks4

UpdatedMarch 30, 2026 at 23:31

Generate UI components from PRD + design tokens when no Figma design is provided. Activated when implementing frontend features without a Figma link.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

rtazima

rtazima/claude-proj-blueprint

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	frontend-agent
description	Generate UI components from PRD + design tokens when no Figma design is provided. Activated when implementing frontend features without a Figma link.
allowed tools	Read, Write, Edit, Grep, Glob, Bash

Frontend Agent — Design-to-Code without Figma

When this skill activates

User runs /implement on a PRD that has no Figma link
User asks to build UI, create a page, or implement a component
PRD contains frontend requirements but no design reference

Workflow

Load design tokens from docs/specs/design-system/README.md
Identify component library — read which library the project uses
Scan existing UI — grep for existing pages/components to match visual patterns
Read PRD requirements — extract user stories, screens, interactions
Generate UI following the rules below
Self-review — verify tokens are used, no hardcoded values, responsive, accessible

Generation rules

Tokens first

ALWAYS read docs/specs/design-system/README.md before generating any UI
Use CSS variables / theme tokens — never hardcode #hex, px spacing, or font names
If a token is missing, flag it and suggest adding to the design system

Consistency

Before creating a new component, search for similar existing ones
Match the layout patterns, spacing rhythm, and interaction patterns of existing screens
Reuse existing components — don't create duplicates

Component structure

One component per file
Props interface defined (TypeScript)
Default to the project's component library (shadcn, Radix, etc.)
Include variants: default, loading, empty, error states
Responsive by default (mobile-first)

Accessibility

Semantic HTML elements
ARIA labels on interactive elements
Keyboard navigable
Color contrast meets WCAG AA (4.5:1 text, 3:1 large text)
Focus indicators visible

What NOT to do

Never generate pixel-perfect mockup replicas without tokens
Never hardcode colors, spacing, or typography
Never skip empty/error/loading states
Never create a component that duplicates an existing one
Never ignore the project's component library choice

Output format

When generating a new page or component:

1. Component file(s) created
2. Tokens used: [list which tokens were applied]
3. Existing components reused: [list]
4. States covered: [default, loading, empty, error]
5. Responsive: [breakpoints handled]
6. Accessibility: [checks passed]

More from this repository

same repository

context-legacy

rtazima/claude-proj-blueprint

Legacy code archaeology — multi-phase discovery that reads the codebase, git history, and optionally Jira to reconstruct WHY code exists. Produces discovery notes, ADR candidates, and PRD candidates for human review. Activated when user says 'descobrir módulo', 'arqueologia de código', 'entender legado', 'contexto do módulo', 'por que esse código', 'legacy context', '/discover', or when starting work on an unfamiliar legacy module.

2026-05-1818

legacy-context

rtazima/claude-proj-blueprint

Legacy code archaeology and context bootstrap. Activated when the user mentions "legacy code", "código legado", "sistema antigo", "código sem documentação", "discover module", "entender módulo", "arqueologia de código", "código que ninguém entende", or runs /discover. Populates the empty upper layers of tiered lookup (memory and docs) before context-engineering techniques can be effective. Read-only for source code: outputs discovery notes, ADR candidates, and suggested intent markers. Remote discovery supports GitHub (via gh CLI) and Azure DevOps (via az CLI plus REST).

2026-05-1518

context-engineering

rtazima/claude-proj-blueprint

Context engineering — proactive context window management. Activated when working on large tasks, long sessions, multi-file changes, or when context is getting bloated. Keywords: "context", "too much code", "split this task", "focus", "scope down", "token budget", "keep it small". Complements the reactive context-guard hook with proactive techniques.

2026-05-1418

claude-design-handoff

rtazima/claude-proj-blueprint

Reconcile a Claude Design handoff bundle (PROMPT.md) with the project's PRD and conventions. Activated when the PRD references a Claude Design handoff, when a PROMPT.md exists in docs/design/, or when the user mentions "Claude Design", "design handoff", or "PROMPT.md".

2026-04-2118

learner

rtazima/claude-proj-blueprint

Pattern learner. Activated when the user says "learn from this", "what patterns", "improve skills", "retrospective", "session review", or wants to extract reusable patterns from recent work to improve the project's skills and conventions.

2026-04-1418

memory

rtazima/claude-proj-blueprint

Long-term memory via vector DB. Activated when the user asks about past decisions, previous solutions, project history, "how did we do X", "last time", "we already solved", or when the agent needs historical context before planning an implementation.

2026-04-1418

Frontend Agent — Design-to-Code without Figma

When this skill activates

User runs /implement on a PRD that has no Figma link

User asks to build UI, create a page, or implement a component

PRD contains frontend requirements but no design reference

Workflow

Load design tokens from docs/specs/design-system/README.md

Identify component library — read which library the project uses

Scan existing UI — grep for existing pages/components to match visual patterns

Read PRD requirements — extract user stories, screens, interactions

Generate UI following the rules below

Self-review — verify tokens are used, no hardcoded values, responsive, accessible

Generation rules

Tokens first

ALWAYS read docs/specs/design-system/README.md before generating any UI

Use CSS variables / theme tokens — never hardcode #hex, px spacing, or font names

If a token is missing, flag it and suggest adding to the design system

Consistency

Before creating a new component, search for similar existing ones

Match the layout patterns, spacing rhythm, and interaction patterns of existing screens

Reuse existing components — don't create duplicates

Component structure

One component per file

Props interface defined (TypeScript)

Default to the project's component library (shadcn, Radix, etc.)

Include variants: default, loading, empty, error states

Responsive by default (mobile-first)

Accessibility

Semantic HTML elements

ARIA labels on interactive elements

Keyboard navigable

Color contrast meets WCAG AA (4.5:1 text, 3:1 large text)

Focus indicators visible

What NOT to do

Never generate pixel-perfect mockup replicas without tokens

Never hardcode colors, spacing, or typography

Never skip empty/error/loading states

Never create a component that duplicates an existing one

Never ignore the project's component library choice

Output format

When generating a new page or component:

1. Component file(s) created 2. Tokens used: [list which tokens were applied] 3. Existing components reused: [list] 4. States covered: [default, loading, empty, error] 5. Responsive: [breakpoints handled] 6. Accessibility: [checks passed]