Configuration generator

# CSC Design System

This repository is the Civil Service Commission design system. The web app is Next.js 15.5.27, React 19, and TypeScript strict, installed with npm workspaces. Routes live under `app/(site)`. UI components come from `@csc/ui`.

Brand blue is `#2A338F`. Brand red is `#EC1C2D`. White text on a destructive action uses `#C41222`.

This Next.js install has no `node_modules/next/dist/docs/` folder and no `/_next/mcp` endpoint. Do not upgrade Next.js to obtain them, and do not tell an agent those files exist.

Do not put secrets, production records, or real personal data in examples, rules, or prompts. Do not claim a WCAG audit. Proposed CSC standards are not approved policy.

Load detailed guidance only when the task needs it:

- `.cursor/rules/csc-ui.mdc`
- `.cursor/rules/security.mdc`
- `.cursor/rules/react-performance.mdc`
- `.agents/skills/csc-ui-standards`
- `.agents/skills/csc-security-authorization`
- `.agents/skills/csc-react-performance`

After a code change, run `npx tsc --noEmit` and `npx vitest run`.

---
description: CSC UI components, tokens, and variant usage. Request when editing interface code.
globs: packages/ui/**/*,components/**/*,app/**/*.tsx
alwaysApply: false
---

# CSC UI standards

Use `Button`, `Input`, `Modal`, and the other exports from `@csc/ui`. Do not create a second button with a new color.

Brand blue `#2A338F` is `--primary`. Brand red `#EC1C2D` is the swatch. Destructive buttons use `variant="danger"`, which is action red `#C41222`, because white on `#EC1C2D` is below 4.5:1.

Actions are `<button>` elements. Navigation to a URL is a link. Pass `type="button"` inside a form when the control must not submit. `IconButton` requires a `label`.

Variant cards and other wrappers must not contain a nested `<button>`. Do not add `suppressHydrationWarning` to hide attributes injected by a browser tool.

---
name: csc-ui-standards
description: Use when creating or editing CSC interface components, variants, or pages that import @csc/ui. Keeps tokens, button semantics, and variant APIs aligned with this repo.
---

# CSC UI standards

Read [references/ui.md](references/ui.md) before editing a component. Do not copy this skill into AGENTS.md.

Use the existing `@csc/ui` export. Match a registry variant id. Do not invent a prop the component does not accept.

# CSC UI reference

Import from `@csc/ui`. The button API accepts `variant`, `size`, `shape`, `loading`, `icon`, `iconPosition`, and normal button attributes such as `type`.

`variant="danger"` uses `#C41222`. Do not put white text on brand red `#EC1C2D`.

`IconButton` sets `aria-label` from `label`. Hide the decorative icon with `aria-hidden`.

A clickable card or variant tile is a `div` with `role="button"` when it contains another button. The preview inside that tile is `aria-hidden`.

Native mobile is `@csc/ui-native`. Its `Button` takes `label` and `onPress`. Do not pass `variant` or `type` to it.

---
description: Server-side authorization, secrets, and output safety. Request when editing data access or forms.
globs: app/**/*,packages/**/*.ts,packages/**/*.tsx
alwaysApply: false
---

# Security and authorization

Hiding a button is not authorization. A protected change has to be checked on the server. This design system does not implement login. Do not pretend a session exists.

Do not render record text with `dangerouslySetInnerHTML`. Do not commit `.env` secrets or put tokens in rules, skills, or MCP examples. Use placeholders such as `${env:NAME}`.

Do not send production records, credentials, or confidential source to an external AI service. Examples stay synthetic. File uploads still need a server allow-list. The browser `accept` attribute is not that control.

Do not enable an MCP server that can write, run a shell, or read a database unless someone explicitly approves that permission.

---
name: csc-security-authorization
description: Use when a change touches forms, uploads, secrets, authorization, or data rendered from records. Requires a server-side check for protected actions.
---

# Security and authorization

Read [references/security.md](references/security.md). This skill does not grant access and does not enable an MCP server.

# Security reference

Protected operations are enforced on the server. A hidden button, a client-only route guard, or a disabled control is not authorization.

This repository has no authentication implementation. Do not add a fake session.

Never place a real token in a rule, skill, example, or generated MCP file. Write `${env:NAME}` and tell the person to set the variable outside the repo.

Reject unexpected file types on the server. Do not describe a client-side `accept` filter as the security control.

Do not run `npx skills add` or another remote installer unless the person asks for that exact command.

---
description: React and Next.js rendering cost for this App Router app. Request when changing data loading or client components.
globs: app/**/*,packages/ui/**/*,components/**/*
alwaysApply: false
---

# React performance

Prefer a Server Component. Add `"use client"` only for state, events, or browser APIs. Do not mark a static page as a client component so it can render a button that already exists in a child.

Do not fetch independent requests one after another when they can run together. Do not import a whole barrel when the page needs one component and the barrel pulls client code into the server graph.

Keep client state local. Avoid copying large server objects into client props. Images in `public/assets` should use the existing preview size rather than a new unoptimized full-size embed of the 46 MB brand PDF.

---
name: csc-react-performance
description: Use when writing or reviewing React and Next.js data loading, client boundaries, or bundle size in this App Router app.
---

# React performance

Read [references/performance.md](references/performance.md) when the change affects rendering or fetching. The Vercel react-best-practices skill is a separate upstream package and is not installed here.

# Performance reference

Server Components are the default. A client boundary belongs on the interactive child, not the whole route, when the rest of the page can stay on the server.

Start independent fetches together. Show a loading state for the slow part instead of blocking the entire route on the slowest call.

Do not add a caching rule that treats public brand assets and private records the same way. This app does not have a private data API. Say which data is public before choosing `cache`, `no-store`, or revalidation.

Check the rendered route at 375 CSS pixels for horizontal page overflow. A wide table may scroll inside its own region.