Nezam

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.

Pure-Markdown context loader for design tasks. Agents call this skill at the start of any design task to load the correct subset of reference material from docs/reference/. Equivalent to impeccable's load-context.mjs but works without Node.js — pure agent instruction.

Generates locale-aware dummy content (copy, logos, illustrations) that picks up the live --ds-* token theme. Output adapts color, radius, and typography to whichever DESIGN.md profile is active.

End-to-end rendered-wireframe pipeline for marketing & SaaS pages: reads wireframes_locked.json, dispatches block components, applies fixed-layout chrome (full-width header/footer), and enforces DESIGN.md §7 contract.

High-level governance for token hierarchy, naming conventions, and multi-platform synchronization (web, mobile, email).

Design patterns for information architecture and hierarchical data display.

W3C-style design tokens, theme switching, fluid typography, and spacing matrices — the design-system core contract. Includes system build and frontend integration workflows.

Convert low-fidelity wireframes into implementation-ready component specifications.

Recommends and integrates shadcn/ui components with NEZAM's DESIGN.md token system. Use when selecting, installing, or customizing shadcn/ui components. Provides NEZAM CSS variable overrides, RTL notes, and component decision trees. Works with the awesome-shadcn-ui catalog at docs/reference/awesome-shadcn-ui-main/.

Token + grid systems — CSS Grid/Flex, container queries, clamp() typography, breakpoint matrices.

Universal design law baseline from the TypeUI system. Loads one or more of the 4 TypeUI fundamentals modules based on task type: ui-principles, ux-principles, typography-principles, accessibility. These are design-system-agnostic structural principles — the 'why' behind design decisions. WCAG 2.2 rules are non-negotiable and override aesthetic preferences.

Arabic-first wireframe typography system. Combines typeui-main's modular scale with Masri letterforms (Cairo, IBM Plex Sans Arabic) and the +30% RTL expansion rule from DESIGN.md §9.

Define tokenized design-system contracts (color, type, spacing, themes, a11y) for enforceable implementation.

High-craft standards gate for wireframe renders. Enforces pixel discipline, state completeness (default/hover/focus/active/disabled/loading/error), motion budget, and the 'no missing states = not done' rule from impeccable-main.

Motion systems (Framer Motion / GSAP), GPU-composited animation, prefers-reduced-motion, and progressive 3D fallback chains.

Comprehensive framework for checking WCAG 2.2 AA compliance, keyboard navigation, and screen reader compatibility.

Assemble opt-in designSkillStack references for prompt.json / PROMPT.md from .nezam/core/gates/design-skills.yaml. Use when prompt-engineer, /PLAN design, or /CREATE prompt needs external UI skills (Emil, Taste v2, Stitch, Impeccable) without pasting full skill bodies.

Transfers finalized design specs to development with full context: ground-truth component references, recursive import trees, token maps, and RTL verification.

Defines motion, transitions, and micro-interactions with structured 2-variation discipline, token enforcement, and branch vs replace mode decision logic.

Standardized framework for user research, persona creation, and empathy mapping within the SDD pipeline.

Generate precise high-fidelity ASCII wireframes as implementation contracts during /PLAN design wireframes.

Unified wireframe generation and spec engine with mandatory pixel-perfect reproduction gate, design-system fidelity enforcement, and 2-variation discipline.

Repo-grounded teaching map — which NEZAM paths to open for security, design, SEO, CI, and orchestration when explaining (not executing) workflows.

Structured handoff report generator — session state capture, decision log, next-action brief, and context package for human-to-human or agent-to-agent transitions.

Deterministic CI/CD workflow authoring for GitHub Actions with required checks, artifact hygiene, and release safety controls.

Development method overlays for NEZAM. Modifies phase execution and gate thresholds without changing the SDD pipeline structure.

Generate and refresh root HEALTH.md with a plain-language 0-100 project health score across six dimensions.

Resolve natural-language feature requests into an ordered NEZAM skill stack with MENA-aware routing.

Implementing complex analytical models like cohort analysis, churn, and LTV.

Implementing performant and meaningful animations for data transitions.

Defining visual styles for charts, including grids, tooltips, and markers.

Selection and implementation of appropriate chart types for various data dimensions.

Defining accessible and semantic color palettes for complex data sets.

Designing the layout and information architecture for complex analytics dashboards.

Handling real-time data ingestion and visualization updates.