Menu
Token + grid systems — CSS Grid/Flex, container queries, clamp() typography, breakpoint matrices.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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).