Skills Reference: React, Design Systems, Styling, and Technical Writing

Overview

This section documents the skill packs that shape React performance guidance, visual design workflows, token-driven UI systems, accessible styling, long-form writing, and documentation optimization in matrix-core. The packs are specialized by domain: React best practices focuses on performance rules, design combines brand and corporate identity generation with banner and presentation workflows, design-system formalizes token layers and component specs, ui-styling concentrates on shadcn/ui and Tailwind usage, article-writing enforces a distinctive long-form voice, and llm-docs-optimizer improves documentation quality for AI-assisted workflows.

Shared Manifest Model

All SKILL.mtx manifests follow the same structure: SKILL, INPUTS, CORTEX, PROCEDURE, OUTPUTS, and FAILURE_MODES, with slot.target resolved through cortex.find and clarification prompts triggered when the target stays ambiguous.

React Best Practices

skills/react-best-practices/SKILL.md is a performance-first React and Next.js guide. The reference set expands into rule-driven guidance on waterfalls, bundle size, server-side performance, client-side data fetching, rendering, JavaScript performance, and advanced patterns.

The manifest does not invoke tools or sub-skills. It resolves the target artifact before proceeding.

Design Skill Pack

skills/design/SKILL.md is the broadest design pack. It combines brand identity, tokenized design systems, UI styling, logo generation (55 styles via Gemini AI), corporate identity program outputs (50 deliverables with CIP mockups), Chart.js presentations, banners, social photo assets, and icon generation into one routing layer.

CIP Search Core

skills/design/scripts/cip/core.py turns CSV-backed corporate identity data into ranked search results using BM25 scoring. It maintains a domain map for deliverable, style, industry, and mockup.

Banner design rules

skills/design/references/banner-sizes-and-styles.md defines practical design rules: three-zone hierarchy, safe zones, one CTA per banner, typography limits, text-to-image ratio guidance, and print specs. Style options include minimalist, bold typography, photo-based, geometric, glassmorphism, neon, editorial, collage, data-driven, dark mode, flat color, nature, and motion-ready.

Design System Skill Pack

skills/design-system/SKILL.md formalizes token architecture and component specification using a three-layer model: primitive, semantic, and component tokens.

Token layers

• Primitive tokens define raw values for colors, spacing, typography, line heights, weights, tracking, radii, and durations.
• Semantic tokens remap those values into meaning-based names: background, foreground, card, popover, muted, secondary, accent, border, and input.
• Component tokens build button, input, and alert-specific values on top of the semantic layer.

Component and state guidance

skills/design-system/references/component-specs.md captures variants, sizes, states, and anatomy for buttons, form controls, badges, and alerts. skills/design-system/references/states-and-variants.md defines interaction rules: default, hover, focus, active, disabled, and loading states; state priority from disabled down to default; disabled conventions for opacity, pointer events, cursor, background, and color; loading placement for button, input, card, and page.

UI Styling Skill Pack

skills/ui-styling/SKILL.md is the implementation-facing styling guide centered on shadcn/ui (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, responsive utilities, theme customization, and canvas-based visual design. The pack includes Apache 2.0 licensing and SIL Open Font License notices for canvas font families.

The guide presents a quick start that installs shadcn/ui, adds components, and uses utility classes. It also documents the Tailwind-only path including Vite configuration and the @import "tailwindcss"; entry point.

Article Writing Skill Pack

skills/article-writing/SKILL.md is the long-form writing counterpart to the visual and technical skills. It is designed for guides, tutorials, essays, newsletter issues, and content that should sound like an actual person with a point of view.

The guide is opinionated:

• Lead with concrete artifacts and examples.
• Explain after the example.
• Keep sentences tight unless the source voice is intentionally expansive.
• Use proof instead of adjectives.
• Avoid generic AI phrasing and engagement padding.

If voice references exist, the guide says to run brand-voice first and reuse its VOICE PROFILE; otherwise it defaults to a sharp operator voice.

LLM Docs Optimizer Skill Pack

skills/llm-docs-optimizer/SKILL.md improves documentation for AI assistants and LLMs through c7score-oriented restructuring, llms.txt generation, question-driven content mapping, and a scoring model.

Optimizer workflow

1. Analyze current documentation.
2. Generate common developer questions.
3. Map questions to snippets.
4. Optimize the documentation.
5. Validate formatting and snippet quality.
6. Evaluate the score impact.

c7score metrics

• Question-Snippet Comparison
• LLM Evaluation
• Formatting
• Project Metadata
• Initialization

Documentation analyzer

skills/llm-docs-optimizer/scripts/analyze_docs.py extracts markdown code fences, detects short or setup-only snippets, flags metadata-heavy content, finds duplicates, suggests common questions, and prints a report with recommendations.

Skill Pack Summary