Menu
Token + grid systems — CSS Grid/Flex, container queries, clamp() typography, breakpoint matrices.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
Workspace-level visual asset and canvas pipeline for generating documents, slides, and posters with rich layouts.
Enforces the full-width header / max-width body / full-width footer chrome pattern. Implements the filter+split rendering technique so background bleeds reach the viewport edge while inner content stays constrained.
Apply high-quality frontend design patterns with token-first implementation rules and NEZAM gate compliance.
Run before any design work on an unfamiliar codebase — extracts full UI context (components, layouts, routes, tokens, pages, extractable components) into 6 structured files in .cursor/context/design-init/.
Enforces the two-step design discipline: Step A pixel-perfect ground-truth reproduction → Step B exactly 2 branch variations. Applies to all design work in NEZAM.
Orchestrates high-performance infinite canvas systems, viewport transforms, and spatial indexing.
| name | nezam-token-grid-typography |
| description | Token + grid systems — CSS Grid/Flex, container queries, clamp() typography, breakpoint matrices. |
| version | 1.0.0 |
| updated | "2026-05-08T00:00:00.000Z" |
| changelog | [] |
| tier | 2 |
| breaking_changes | false |
Define and enforce a deterministic token, typography, and layout grid foundation for React UI work before component implementation. Single-responsibility: typography + grid + container-query matrix. (Absorbs the previously-proposed nezam-grid-systems.)
docs/DESIGN.md typography, spacing, and layout sections.docs/specs/SEO_RESEARCH.md and IA constraints when available.@.cursor/skills/nezam-component-library-api/SKILL.md.docs/DESIGN.md into categories: color, spacing, radius, typography, shadow, z-index, motion.@.cursor/skills/nezam-pro-design-tokens/SKILL.md.clamp(min, preferred, max) for each role (display, h1..h6, body, caption, label); set line-height + letter-spacing tokens.mobile, tablet, desktop, wide); map layout tokens to each tier.:root, theme scopes, dark-mode scope); avoid inline literal fallbacks except governed defaults.@container) for components that vary by parent width rather than viewport.--surface-card, --text-muted) to isolate implementation from base-token churn.@.cursor/skills/nezam-component-library-api/SKILL.md and motion roles for cross-system parity.clamp() with min/preferred/max pattern.< 0.1 under responsive transitions.tokens/base.json (raw scales).tokens/semantic.json (usage semantics).css/tokens.css (:root + theme scopes).css/grid.css (macro + container rules).docs/specs/TYPOGRAPHY_GRID_MATRIX.md (reference table)./PLAN design: run before approving visual specs./DEVELOP: block component work until token contracts exist./SCAN code|a11y|perf: enforce token + typography checks.@.cursor/skills/nezam-pro-design-tokens/SKILL.md, @.cursor/skills/nezam-component-library-api/SKILL.md, @.cursor/skills/nezam-motion-3d-progressive/SKILL.md, @.cursor/skills/nezam-react-architecture/SKILL.md.[.cursor/rules/design-dev-gates.mdc](.cursor/rules/design-dev-gates.mdc) Gates 1 & 2 and [.cursor/rules/nezam-design-gates-pro.mdc](.cursor/rules/nezam-design-gates-pro.mdc).px values inside utility classes.font-size per breakpoint instead of clamp().clamp(), @container, grid-template (current).