Proposed CSC Standards
Code quality
Typing, composition, and security habits for this repository.
Rules
Keep TypeScript strict
New components type their props. Do not use any to silence the compiler.
Implementation detail
The repository tsconfig is strict.
Extend existing prop types. Run tsc --noEmit.
Check: tsc exits 0.
Match the documented control
A new screen uses the same element, colors, and radius as this guide.
Implementation detail
Proposed CSC Standard. A second color system drifts from the rules.
Build a button with the documented fill, radius, and type. Do not invent a new blue or red.
Check: The control uses the documented tokens and a semantic element.
Mark client components only when they need state or browser APIs
A component with useState or an event handler is a client component. A static page can stay a server component.
Implementation detail
Next.js App Router sends client components to the browser.
Put "use client" on the interactive module, not on every page.
Check: Server pages do not import useState directly.
Do not render untrusted HTML
Record fields are text, not dangerouslySetInnerHTML.
Implementation detail
Demonstration and production records can contain characters that become markup.
Render strings as React children.
Check: A search of the screen finds no dangerouslySetInnerHTML for record data.
Keep secrets out of the client bundle
Tokens and passwords are not hardcoded in components.
Implementation detail
Client components are visible to the browser.
Read secrets on the server. This design system has no secret store.
Check: The component source contains no API keys or passwords.
Examples
White text on #2A338F, 8px radius, type submit.
Imports: None. Dependencies: None. Rules: CQ-002.
export function Save() {
return <button type="submit" style={{ background: '#2A338F', color: '#fff', borderRadius: 8, minHeight: 38, fontWeight: 700 }}>Save</button>;
}Inserting record text as HTML is an injection risk.
Imports: None. Dependencies: None. Rules: CQ-004.
export function Record({ html }: { html: string }) {
return <div dangerouslySetInnerHTML={{ __html: html }} />;
}Testing checklist
Reusable prompts for this guideline are in the AI Development Hub.