home / skills / yellinzero / aico / aico-frontend-init

aico-frontend-init skill

safe

This skill initializes the frontend environment by generating a design system and constraints documentation from templates.

npx playbooks add skill yellinzero/aico --skill aico-frontend-init

Review the files below or copy the command above to add this skill to your agents.

Files (3)

SKILL.md

3.2 KB

---
name: aico-frontend-init
description: |
  Initialize frontend environment by creating design system and constraints documents from templates.

  Use this skill when:
  - Running /frontend.init command
  - User asks to "initialize frontend", "setup frontend environment"
  - Starting frontend work and need to establish design system and constraints
  - Need to create docs/reference/frontend/design-system.md or constraints.md
---

# 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:

```markdown
# [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

## Output

```
✓ Created docs/reference/frontend/design-system.md
✓ Created docs/reference/frontend/constraints.md
✓ Created docs/reference/frontend/designs/
✓ Created docs/reference/frontend/tasks/
✓ 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

Overview

This skill initializes a frontend environment by creating a design system and constraints documents from templates and reference extraction. It scaffolds docs/reference/frontend with required files and folders so teams start frontend work with clear tokens, conventions, and constraints. The output strictly uses a unified header format and populates sensible defaults or extracts styles from a reference site when provided.

How this skill works

The skill checks for existing docs at docs/reference/frontend/design-system.md and constraints.md, then creates the directory structure and required files if missing. For the design system it either extracts tokens from a provided reference URL using a style-extraction capability or fills a template with asked preferences. For constraints it prompts for tech-stack choices, fills the constraints template, and writes both files plus designs/ and tasks/ folders to docs/reference/frontend.

When to use it

When running /frontend.init or asking to initialize the frontend environment
At the start of frontend work to establish design tokens and engineering constraints
When you need docs/reference/frontend/design-system.md and constraints.md created
When onboarding new frontend engineers and you need a single source of truth
When you want to derive a design system from a reference website URL

Best practices

Always confirm project language from aico.json before generating content
Provide a reference URL when you want accurate style extraction instead of defaults
Answer the constraints questions (framework, TypeScript, styling, testing) to tailor the output
Review and tweak generated tokens and constraints — treat them as living documents
Commit the created docs and folders to version control immediately

Example use cases

Initialize frontend docs for a new project to lock in tokens, typography, and colors
Extract color, spacing, and component tokens from an existing marketing site to bootstrap a design system
Establish team conventions: framework choice, testing tools, and directory patterns before feature work
Create a baseline constraints.md to enforce TypeScript, styling, and component library choices across the repo
Quickly scaffold designs/ and tasks/ folders to collect UI assets and work items

FAQ

What header format do the generated documents use?

All generated documents use the unified header with title, Project, Created and Last Updated lines in YYYY-MM-DD format.

Can I extract styles from a website?

Yes — provide a reference URL and the skill will check for Playwright-style extraction availability and then run style extraction to populate design tokens; otherwise it falls back to the template.