Frontend Init

Initialize frontend engineer configuration files: design system and constraints.

Language Configuration

Before generating any content, check

aico.json

in project root for

language

field to determine the output language. If not set, default to English.

Process

1. Check existing: Look for

   docs/reference/frontend/design-system.md

   and

   constraints.md

2. Create directory structure:

   docs/reference/frontend/
   ├── design-system.md
   ├── constraints.md
   ├── designs/
   └── tasks/
   

3. Design System Setup:
   • Option A: Extract from reference website using

     aico-frontend-style-extraction

     skill
   • Option B: Use template from

     references/design-system.template.md

4. Constraints Setup:
   • Guide user through tech stack questions
   • Use template from

     references/constraints.template.md

5. Save output: Write to

   docs/reference/frontend/

Document Header Format

All generated documents MUST use this unified header format:

# [Document Title]

> Project: [project-name]
> Created: YYYY-MM-DD
> Last Updated: YYYY-MM-DD

Design System Options

Option A: Extract from Reference Website

If user provides a reference URL:

1. Check if Playwright MCP is available
2. Navigate to URL → take screenshot → analyze
3. Extract design tokens using

   aico-frontend-style-extraction

   skill

Option B: Fill Template

If no reference:

1. Read template from

   references/design-system.template.md

2. Ask about color preferences (light/dark, accent color)
3. Ask about typography (serif/sans-serif)
4. Fill in reasonable defaults

Constraints Questions

Question	Options
Framework	React, Vue, Next.js, Svelte
TypeScript	Yes (recommended), No
Component Library	shadcn/ui, Ant Design, MUI, None
Styling	Tailwind CSS, CSS Modules, styled-components
Testing	Vitest, Jest, None
Directory Pattern	Feature-based, Type-based

Templates

• references/design-system.template.md

  - Design tokens template

• references/constraints.template.md

  - Tech stack and conventions template

Update Instructions File

After creating constraint files, update the project's AI instructions file to reference them:

1. Check for existing instructions file:

   • Look for

     CLAUDE.md

     (Claude Code) or

     AGENTS.md

     (Codex) in project root
   • If neither exists, create

     CLAUDE.md

2. Add reference section at the end of the file:

   ## Reference Documents
   
   The following constraint documents should be read before starting work:
   
   - `docs/reference/frontend/design-system.md` - Design tokens and visual guidelines
   - `docs/reference/frontend/constraints.md` - Tech stack and coding conventions
   

3. If file already has Reference Documents section: Append the new references if not already present

Output

✓ Created docs/reference/frontend/design-system.md
✓ Created docs/reference/frontend/constraints.md
✓ Created docs/reference/frontend/designs/
✓ Created docs/reference/frontend/tasks/
✓ Updated CLAUDE.md with reference to constraint files
✓ Frontend environment initialized

Key Rules

• ALWAYS use the unified header format
• MUST create both design-system.md and constraints.md
• ALWAYS create designs/ and tasks/ directories
• MUST update CLAUDE.md or AGENTS.md with reference to constraint files