Skip to content

Commit 12e39ab

Browse files
beeflowbeeflow
committed
chore(stylelint): unify config and allow tailwind at-rules
1 parent 095371a commit 12e39ab

File tree

14 files changed

+610
-1439
lines changed

14 files changed

+610
-1439
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 155 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,205 @@
1-
# React Starter — Copilot Instructions (Authoritative Project Rules)
1+
# Copilot Instructions – Full Working Code Generation from Screenshot
22

3-
> **Goal:** Copilot must always produce a **complete, runnable** implementation (pages, routing, components, exports, tests) that **passes typecheck, lint and tests** without manual fixes. No internal generators, no CLI helpers — **generate everything in code**.
3+
## 1. General Purpose
44

5-
---
5+
These instructions define the exact process and standards for GitHub Copilot to generate **fully working, production-ready code** from a provided screenshot (e.g. exported from Figma or any other design source).
6+
The generated code **must** be ready to run immediately without manual fixes, including:
67

7-
## 1) Framework & Language
8+
- Complete page or component implementation
9+
- Correct routing integration into the existing application
10+
- Functional UI connected to the design system
11+
- Unit tests in the main `tests` directory under the correct subfolder
12+
- End-to-end tests (E2E) if an `e2e` folder exists in the repository
13+
- Automatic linting and fixing of any code quality issues before final delivery
814

9-
* **React + TypeScript** in **strict** mode. No JS files.
10-
* **Functional components only**.
11-
* UI imports **only** from `@/shared/ui`; layout primitives from `@/shared/layout`.
12-
* Do **not** add external UI libraries.
13-
* Comments/strings in **British English**.
15+
The output must meet **modern software engineering principles**:
16+
**DRY**, **SOLID**, **KISS**, **branchless programming** where possible, **early exit** logic, and **maximum nesting depth of 2 levels**.
17+
No `if–else` chains are allowed — each branch must be extracted into a separate function.
1418

1519
---
1620

17-
## 2) Architecture, Quality & Style
21+
## 2. Image Analysis and Layout Reconstruction
22+
23+
When generating code from a screenshot:
1824

19-
* Principles: **DRY, SOLID, KISS**, early‑exit, prefer **branchless** patterns when reasonable.
20-
* **No `else` blocks** in business/UI logic. Split branches into **separate small functions**. Max nesting: **2 levels**.
21-
* Keep components **presentational**; lift state when needed. Memoise where useful (`React.memo`, `useMemo`, `useCallback`).
22-
* Explicit types everywhere; no `any`.
25+
1. **Analyse the layout** — Identify all containers, sections, and components from the screenshot.
26+
2. **Recognise visual hierarchy** — Determine headings, subheadings, content areas, sidebars, and menus.
27+
3. **Identify reusable UI patterns** — If a button, card, or form input is repeated, implement it as a reusable component.
28+
4. **Preserve visual fidelity** — The generated UI must **look identical** to the screenshot within the constraints of the design system.
29+
5. **Responsiveness** — Ensure the layout works on mobile, tablet, and desktop viewports using responsive design principles.
2330

2431
---
2532

26-
## 3) Project Structure & Naming
33+
## 3. Code Generation Rules
34+
35+
When writing code:
36+
37+
- **Language & Framework**: Use **React** with **TypeScript** in strict mode.
38+
- **Components**: Only functional components — no class components.
39+
- **Design System**:
40+
- Import components exclusively from `@/shared/ui` and layout primitives from `@/shared/layout`.
41+
- Do not use any external UI libraries unless explicitly allowed.
42+
- **Structure**:
43+
- Pages → `src/pages`
44+
- Page sections & feature components → `src/features/<page>/components`
45+
- Barrel exports in each `components` directory
46+
- **Routing**:
47+
- If the project has a menu or navigation system, automatically integrate the new page into it.
48+
- Update the routing configuration so the page is accessible immediately.
49+
- **Naming**:
50+
- Use PascalCase for component names.
51+
- Use kebab-case for route paths.
2752

28-
* **Pages:** `src/pages/<PageName>.tsx` (one entry per page).
29-
* **Features/sections:** `src/features/<page>/components/<ComponentName>/`.
30-
* **Inside a component folder:**
53+
---
3154

32-
* `ComponentName.tsx`
33-
* `index.ts` (barrel)
34-
* **Tests:**
55+
## 3a. Routing Implementation Standards (Mandatory)
3556

36-
* **Unit:** `tests/unit/<page>/<ComponentName>.test.tsx` (Vitest)
37-
* **E2E (only if repo has `e2e/`):** `e2e/<page>/<feature>.spec.ts` (match repo runner: Playwright/Cypress)
38-
* Prefer **named exports**; re‑export via barrel files.
39-
* Use TS path aliases (e.g. `@/shared/ui`). Avoid deep relative paths (`../../..`).
57+
When generating any new page or feature, **routing must be implemented immediately** as part of the task.
58+
Failure to add routing is considered incomplete work. Follow these rules:
4059

41-
---
60+
1. **Locate the routing configuration**:
61+
- If the project uses a central router file (e.g. `src/app/routes.tsx`, `src/app/router.ts`, `src/router/index.tsx`), locate it and add the new route entry there.
62+
- If routing is feature-based, update the corresponding feature route configuration file.
4263

43-
## 4) Routing (must include)
64+
2. **Route Path Naming**:
65+
- Use **kebab-case** for all route URLs (`/user-profile`, `/order-history`).
66+
- Path must reflect the page name or its purpose — no generic names like `/new-page`.
4467

45-
* Use **React Router v6+** (or the router already used in repo; detect imports). Create/update:
68+
3. **Component Registration**:
69+
- Import the newly created page component into the router.
70+
- Ensure the import follows the project’s preferred method (e.g. **lazy loading** via `React.lazy` if already used elsewhere).
71+
- The route must render the exact page component without breaking other routes.
4672

47-
* `src/app/router.tsx` with route objects and lazy‑loaded pages.
48-
* `src/app/App.tsx` hosting `<RouterProvider>` / `<BrowserRouter>`.
49-
* Update `src/main.tsx` (or equivalent) to render `<App />`.
50-
* Include **404** route and basic **error boundary**.
73+
4. **Integration with Navigation Menu**:
74+
- If the project has a global navigation menu:
75+
- Add a new menu item linking to the new route.
76+
- Ensure the active state highlights correctly when on the new page.
77+
- Place the menu item in a logical position based on existing ordering.
5178

52-
---
79+
5. **Authentication/Authorisation Rules**:
80+
- If the router uses protected routes, wrap the new route in the correct access control (e.g. `<PrivateRoute>`).
81+
- Do not expose protected pages as public.
5382

54-
## 5) Layout, Spacing & Styling
83+
6. **Testing Routing**:
84+
- Add a unit test that renders the router and verifies navigation to the new page works.
85+
- If E2E tests are in the project, create an E2E scenario that:
86+
- Navigates to the page via the menu link.
87+
- Confirms the correct component content is displayed.
5588

56-
* Layout via **CSS Grid / Flexbox** only. Avoid absolute positioning unless essential.
57-
* Spacing via **design tokens** only (e.g. `gap-1 .. gap-8`, `p-1 .. p-8`).
58-
* Typography & colours via **semantic tokens** (e.g. `text.h1`, `colour.primary.600`).
59-
* **Forbidden:** inline styles, hard‑coded pixels/colours, ad‑hoc CSS.
89+
7. **Error Handling**:
90+
- Ensure the route does not break 404 handling.
91+
- If dynamic routes are used (e.g. `/user/:id`), handle invalid params gracefully.
6092

61-
---
93+
8. **Final Check Before Delivery**:
94+
- [ ] New route is accessible by direct URL in the browser.
95+
- [ ] New route is reachable via the menu (if applicable).
96+
- [ ] All related tests pass.
97+
- [ ] No unused imports remain after routing changes.
6298

63-
## 6) Accessibility (non‑negotiable)
99+
---
64100

65-
* All controls must be **keyboard focusable** with visible focus.
66-
* Accurate `aria-*` attributes; labels associated with inputs; meaningful `alt` text.
67-
* Semantic HTML (`<h1…h6>`, `<p>`, lists) and landmarks where appropriate.
101+
## 4. Styling Guidelines
102+
103+
- All styling must come from **design system tokens**.
104+
- **Prohibited**:
105+
- Inline styles
106+
- Hard-coded pixel values or colours
107+
- **Spacing**:
108+
- Use spacing tokens: e.g. `gap-4`, `p-6`
109+
- **Typography**:
110+
- Use semantic tokens for headings (`text.h1`, `text.h2`, etc.)
111+
- **Colours**:
112+
- Use semantic tokens like `colour.primary.600`
113+
- **Layout**:
114+
- Use Flexbox or CSS Grid exclusively
115+
- No unnecessary absolute positioning
68116

69117
---
70118

71-
## 7) Image → Code Workflow (no generators)
119+
## 5. Integration Requirements
72120

73-
* When given a **Figma screenshot**, infer layout and map elements to the design system:
121+
When generating a page or component:
74122

75-
* **Cards / elevation** → `<Card elevation="sm|md|lg" />`.
76-
* **Buttons** → `<Button variant="primary|secondary|ghost" size="sm|md|lg" />`.
77-
* **Inputs** → `<TextField/>`, `<Select/>`, `<Checkbox/>`, `<Switch/>`.
78-
* **Tables** → `<DataTable columns={…} data={…} />` (columns from visible headers).
79-
* **Avatars / Icons** → `<Avatar/>`, `<Icon name="…"/>`.
80-
* If no exact mapping exists, pick the **closest semantic** component from `@/shared/ui`. Do **not** invent bespoke styles.
123+
- **Menu integration**:
124+
- If a global menu exists, automatically add a link to the new page.
125+
- Ensure active state highlighting works correctly.
126+
- **Routing**:
127+
- Update the router to include the new route.
128+
- Ensure lazy loading if used in the project.
129+
- **Assets**:
130+
- Save any required images in the appropriate `public` or assets directory.
131+
- **Imports**:
132+
- No unused imports.
133+
- Absolute imports preferred over relative if configured.
81134

82135
---
83136

84-
## 8) Testing (Unit & E2E) and Storybook
137+
## 6. Testing Requirements
85138

86-
* **Unit tests** (Vitest) for each new component/page in `tests/unit/...`:
87-
88-
* Render snapshot + one behaviour/assertion (e.g. CTA click, conditional render).
89-
* **E2E tests** **only if `e2e/` exists**; add a smoke test for the new route and critical interactions.
90-
* **Storybook (CSF3)** stories for significant variants/states **when Storybook is present**.
91-
* Tests/stories import from the **public API** (barrels), not deep paths.
139+
- **Unit tests**:
140+
- Create tests in `tests/<feature>` folder.
141+
- Use Vitest or the project’s configured test runner.
142+
- Minimum coverage: rendering, props handling, event handling.
143+
- **E2E tests**:
144+
- If an `e2e` folder exists, create a matching test that visits the new page and verifies critical UI elements.
145+
- **Storybook**:
146+
- Create a `.stories.tsx` file for each component using CSF3 format.
92147

93148
---
94149

95-
## 9) Performance & States
96-
97-
* Provide **empty**, **loading** and **error** states if data is involved.
98-
* Avoid prop drilling; compose components. Defer expensive work; memoise thoughtfully.
150+
## 7. Optimisation and Linting
99151

100-
---
152+
Before finalising:
101153

102-
## 10) Copilot Output Contract (critical)
154+
1. Run the project’s lint command (`pnpm lint` or equivalent).
155+
2. Fix **all** linting errors.
156+
3. Optimise code for performance — no unnecessary re-renders.
157+
4. Ensure all TypeScript types are explicit — no `any` unless strictly necessary.
158+
5. Apply branchless patterns where possible.
103159

104-
Copilot must output:
160+
---
105161

106-
1. **File tree** to be created/updated, including routing files.
107-
2. **Complete code blocks** for every new/changed file — no placeholders or TODOs.
108-
3. **Barrel export** updates (exact lines to add).
109-
4. **Tests** in `tests/unit/...` and **e2e** in `e2e/...` if folder exists.
110-
5. **Validation & auto‑fix commands** (and confirm they pass locally):
162+
## 8. Error Handling and Resilience
111163

112-
```bash
113-
pnpm typecheck && pnpm lint --fix && pnpm test
114-
# If Storybook exists in this repo:
115-
pnpm build:storybook
116-
```
117-
6. State explicitly that all checks **passed** with zero TypeScript/ESLint errors and green tests.
164+
- Validate all props and inputs.
165+
- Use `try/catch` for API calls.
166+
- Show meaningful error messages to users if something fails.
167+
- Avoid silent failures.
118168

119169
---
120170

121-
## 11) Pull Requests & CI Gates
171+
## 9. Final Delivery Checklist
122172

123-
* Conventional commit titles (e.g. `feat(dashboard): add StatsGrid route + components`).
124-
* PR description must include:
173+
Before considering the task complete, ensure:
125174

126-
* Source (screenshot/Figma frame id/name).
127-
* Any deviations from design + rationale.
128-
* Confirmation that unit/e2e tests were added (if applicable) and all CI commands passed.
175+
- [ ] The generated page/component exactly matches the screenshot visually.
176+
- [ ] All components use the design system and tokens.
177+
- [ ] Routing is updated and working.
178+
- [ ] Menu integration works (if applicable).
179+
- [ ] All assets are placed correctly.
180+
- [ ] Unit tests are created and pass.
181+
- [ ] E2E tests are created and pass (if applicable).
182+
- [ ] Linting passes with zero errors.
183+
- [ ] Code follows DRY, SOLID, KISS principles.
184+
- [ ] No `if–else` — only early returns or extracted functions.
185+
- [ ] Nesting depth ≤ 2.
186+
- [ ] No unused variables, imports, or dead code.
129187

130188
---
131189

132-
## 12) Quick Checklist (paste into PR)
190+
## 10. Example Workflow
191+
192+
1. Receive screenshot of `Dashboard` page.
193+
2. Analyse layout — header, stats grid, activity feed, sidebar.
194+
3. Create `src/pages/dashboard.tsx` with full UI.
195+
4. Extract repeating patterns into `src/features/dashboard/components`.
196+
5. Integrate into menu and router.
197+
6. Add tests in `tests/dashboard`.
198+
7. Add E2E test in `e2e/dashboard` (if folder exists).
199+
8. Run lint and fix issues.
200+
9. Verify visual match.
201+
10. Commit and push.
202+
203+
---
133204

134-
* [ ] React + TS (strict), functional only; British English
135-
* [ ] Routing added/updated with lazy pages, 404, error boundary
136-
* [ ] Components use `@/shared/ui` & tokens only; no inline styles
137-
* [ ] Max nesting ≤ 2; no `else` blocks; early exits; branchless where reasonable
138-
* [ ] Unit tests in `tests/unit/...` (and e2e if `e2e/` exists)
139-
* [ ] Barrels updated; no deep relative imports
140-
* [ ] `pnpm typecheck && pnpm lint --fix && pnpm test` all green (and Storybook build if present)
205+
**Important**: The output must be **ready to run without manual intervention**.

‎.stylelintrc‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
{
2-
"extends": "stylelint-config-recommended"
2+
"extends": ["stylelint-config-recommended"],
3+
"rules": {
4+
"at-rule-no-unknown": [
5+
true,
6+
{
7+
"ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
8+
}
9+
]
10+
}
311
}

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,6 @@ npm run [command_name]
108108
3. [React Query abstraction](/docs/03-react-query-abstraction.md)
109109
4. [Using plop commands](/docs/04-using-plop-commands.md)
110110
5. [E2E tests](/docs/05-e2e-tests.md)
111-
6. [Generating Components from Figma](/docs/06-figma-generator.md)
112111

113112
## How to Contribute
114113

0 commit comments

Comments
 (0)