Build pages using ONLY existing atomic-design components. REQUIRES atomic-design skill. Use for composing pages, creating views/features from existing components.
The English summary is being prepared. Showing the original description.
Review the instructions the agent will receive before you install.
Critical rule: Figma is source of truth. NEVER guess layout. ALWAYS extract EXACT page specs from Figma first.
| Forbidden | Required |
|---|---|
| Creating new atoms/molecules/organisms | Use existing components only |
| Guessing layout values | Extract from Figma |
| External UI libs (MUI, Chakra) | Design system imports only |
| Hardcoded values (#333, 24px) | CSS Modules + tokens |
| Rounding values | Exact Figma values |
| Situation | Action |
|---|---|
| Missing atom/molecule/organism | -> atomic-design |
| Need new tokens | -> atomic-design |
| Token value changed in Figma | -> atomic-design (update first) |
| Composing from existing | Stay here |
Step 0: EXTRACT FROM FIGMA (mandatory)
Step 1: INVENTORY (scan existing components)
Step 2: GAP ANALYSIS (map requirements to components)
Step 3: BUILD OR STOP
/**
* Dashboard Page
* @figma https://figma.com/file/xxx?node-id=123
* @extracted 2024-01-15
* Layout specs from Figma - DO NOT MODIFY
*/
import { DashboardLayout } from '@/templates/DashboardLayout';
import { Card } from '@/molecules/Card';
import { DataTable } from '@/organisms/DataTable';
import styles from './Dashboard.module.css';
export const Dashboard = () => (
<DashboardLayout>
<div className={styles.statsGrid}>
<Card title="Revenue">$12,450</Card>
</div>
<DataTable columns={columns} data={data} />
</DashboardLayout>
);
/* Dashboard.module.css - ALL values from Figma */
.statsGrid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* From Figma */
gap: var(--spacing-6); /* From Figma */
}
@media (max-width: 768px) {
.statsGrid {
grid-template-columns: 1fr; /* Figma mobile */
gap: var(--spacing-4);
}
}
import { Button } from '@/design-system/atoms/Button';
import { Card } from '@/design-system/molecules/Card';
import { Header } from '@/design-system/organisms/Header';
import { DashboardLayout } from '@/design-system/templates/DashboardLayout';
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
AID Phase 4 - Development phase. Use for implementing features, TDD practices, code reviews, transitioning from planning to QA.
The English summary is being prepared. Showing the original description.
AID Phase 0 - Research & discovery. Use for validating problem spaces, identifying stakeholders, defining success metrics, deciding whether to proceed.
The English summary is being prepared. Showing the original description.
AID Phase 3 - Implementation Planning with consolidation-first approach. Resolves contradictions between PRD and Tech Spec, creates consolidated master document, then breaks down into actionable tasks and populates Jira. Includes sprint planning and risk assessment.
The English summary is being prepared. Showing the original description.
AID Phase 1 - PRD creation. Use for user stories, acceptance criteria, scoping features, transitioning from discovery to tech spec.
The English summary is being prepared. Showing the original description.
AID Phase 5 - QA and Release. Use for validating implementations, acceptance tests, preparing releases, deployment, operational readiness.
The English summary is being prepared. Showing the original description.
AID Phase 2 - Technical Specification. Use for system architecture, API contracts, data models, security architecture, transitioning from PRD to implementation.
The English summary is being prepared. Showing the original description.