Menu
Enforces correct use of AFENDA design tokens, the L0–L4 premium elevation architecture, semantic lanes, and generous spatial rhythm. Use when editing styles, themes, layouts, or visual states.
Complete Neon Auth integration setup for AFENDA, addressing gaps in current codebase. Covers provisioning, server SDK, client SDK, bearer token verification, and security module integration.
Practical NextAuth/Auth.js development and implementation playbook with end-to-end debugging workflows for Next.js apps.
Build AFENDA Treasury as an AP-grade full-stack ERP sub-domain (contracts, db, core, api, worker, web, tests, gates). Use when: treasury module, cash management, bank account, bank statement, reconciliation, liquidity forecast, cash position, payment factory, bank transfer, treasury controls, treasury architecture review, AP-style enterprise workflow.
Quality assurance for web accessibility and usability, particularly for users with disabilities. Use when involved in any web project.
Skill for integrating Better Auth - the comprehensive TypeScript authentication framework.
This skill provides guidance for implementing security features that span across Better Auth, including rate limiting, CSRF protection, session security, trusted origins, secret management, OAuth security, IP tracking, and security auditing. These topics are not covered in individual plugin skills.
| name | afenda-design-system-enforcement |
| description | Enforces correct use of AFENDA design tokens, the L0–L4 premium elevation architecture, semantic lanes, and generous spatial rhythm. Use when editing styles, themes, layouts, or visual states. |
| category | ui |
| priority | high |
Use this skill to keep UI work aligned with the AFENDA premium token system. The core philosophy is comfort and clarity through true layered depth and generous spacing—avoiding cramped layouts, border fatigue, and visual noise.
Invoke this skill when the request involves:
Treat these files as canonical token sources:
packages/ui/src/styles/_tokens-light.csspackages/ui/src/styles/_tokens-dark.cssFull utilization demos (Premium Architecture):
packages/ui/advanced-token-system.html — The primary reference for combining premium spacing (--space-*), luxury feel, physical nesting, and the L0→L4 architecture.Follow project-wide architecture guidance from:
AGENTS.md.github/copilot-instructions.mdWhen working in dark mode, depth is created by subtle shifts in lightness, not just borders. ALWAYS select surfaces through the 4-layer architecture:
--surface-l0, --background): The deepest recess of the app shell. Used for outer window backgrounds and gutters.--surface-l1, --surface-100 to 250): The primary working canvas. Dashboards, main data grids, and forms live here.--surface-l2, --card): Standard content containers, KPI cards, and segmented data blocks. Creates logical grouping inside L1.--surface-l3, --popover, --sheet): Transient UI like dropdowns, tooltips, and command palettes. Must cast --shadow-popover.--surface-l4, --modal): Blocking dialogs. Must use --shadow-modal and be backed by the --scrim token to push L0–L3 into the background.Comfortable, luxurious UI requires negative space. Use the established spatial scale to give the eye room to rest.
--space-section (5rem): Use between major page regions or totally distinct conceptual blocks.--space-block (2.5rem): Use between related but distinct groupings (e.g., separating a header from a data grid).--space-card (2rem): Use for internal padding of premium elevated components.--space-inline (1.5rem): Use for standard component gaps and grid column separation.--space-tight (0.75rem): Use for tight component locking (e.g., an icon next to text).Rule: Do not hardcode rem or px values for layout padding/margins if a --space-* token is semantically appropriate.
Do not mix interaction intents. Map visuals to the correct lane before choosing tokens:
--primary): Used for marketing-aligned components, primary SaaS submission buttons, and core branding elements.--interactive): Used for heavy day-to-day workflow: data grid interactions, filters, inline edits, links, and shell navigation.--premium): Used for governance, audit logs, compliance, finalized reporting, and high-trust executive actions.--secondary, --muted): Structural UI that should not draw attention.--success, --warning, --destructive. Only use soft backgrounds (--*-soft or color-mix) for dense grids to prevent eye strain.--chart-*): STRICTLY reserved for charts, comparisons, and series. Never use chart tokens for workflow statuses, badges, or buttons.When working on auth routes/components (apps/web/src/app/auth), use this fixed mapping:
EmailAuthPanel, etc.): L2.--success-soft, --destructive-soft).Use shared surface primitives from apps/web/src/app/auth/_components/surface-styles.ts.
Before picking colors, assign the component to L0, L1, L2, L3, or L4. Verify that neighboring components are at the same or adjacent layers.
Apply the correct --space-* tokens for padding and gaps. Ensure the layout is not cramped.
Decide if the action is Brand, Operator, or Institutional. Apply the corresponding token family.
#hex, rgb(), oklch()) in edited files.pnpm typecheck, pnpm check:all).For auth changes, run the dedicated check:
node tools/gates/auth-design-system.mjs
Completion Checklist
[ ] No hardcoded colors or raw layout measurements introduced.
[ ] Every edited surface maps to the correct L0–L4 layer and physical nesting is logical.
[ ] Spacing tokens (--space-*) are used to maintain premium rhythm.
[ ] Tokens are chosen from the correct semantic lane (Brand vs Operator vs Institutional).
[ ] Dataviz tokens are not bleeding into workflow statuses.
[ ] Modals (L4) properly utilize --scrim to obscure lower layers.