# Skrewww Design System

> Machine-readable overview for search engines and AI answer systems.

## What Skrewww is
AI-first design system platform with token-driven components, native-first form semantics with accessible custom controls where native HTML cannot represent the confirmed interaction model, and documentation for designers, developers, and coding agents.

## Who it is for
Designers, frontend engineers, design-system maintainers, and coding agents building product UI with token-driven components.

## Four-layer architecture
1. Foundation — tokens, color, type, spacing, radius, elevation, motion, icons, accessibility.
2. Component Library — Actions, Forms, Navigation, Feedback, Containers & Overlays, Content & Data.
3. Style Systems — Shape and Surface personalities applied through tokens, not forks.
4. Industry Systems — Banking pilot shipped (3 components); additional industries planned via the CLI preset model, composing Layer 2 rather than forking it.

## Current status
- Design system version: 0.2.0-beta
- Implemented React components: 47 (Beta)
- Accessibility baseline: WCAG 2.2 AA (target)
- Last updated: 2026-07-13

## Canonical documentation
- Homepage: https://skrewww.com/
- Components index: https://skrewww.com/components
- Foundations: https://skrewww.com/foundations
- Component registry JSON: https://skrewww.com/registry.json
- Expanded machine index: https://skrewww.com/llms-full.txt

## Component categories
- Actions: https://skrewww.com/components/category/actions
- Forms: https://skrewww.com/components/category/forms
- Navigation: https://skrewww.com/components/category/navigation
- Feedback: https://skrewww.com/components/category/feedback
- Containers & Overlays: https://skrewww.com/components/category/containers-overlays
- Content & Data: https://skrewww.com/components/category/content-data

## Industries (Layer 4 — distinct from Component categories above)
- Industries index: https://skrewww.com/components/industries
- Banking: https://skrewww.com/components/industries/banking

## Implemented components
- Button (beta): https://skrewww.com/components/button — Button is a primary interactive trigger for user actions — submit, confirm, navigate, or initiate a process.
- Card (beta): https://skrewww.com/components/card — Card is a general-purpose content container grouping related information with a clear visual boundary.
- Text Input (beta): https://skrewww.com/components/text-input — Text Input is a single-line text entry for short, free-form data such as names, emails, or search terms.
- Form Field (beta): https://skrewww.com/components/form-field — Form Field is a shared field wrapper for label, description, required indicator, and validation placement — not a visual input.
- Validation Message (beta): https://skrewww.com/components/validation-message — Validation Message is inline typed feedback paired with a field — error, warning, success, or info — with icon and text.
- Checkbox (beta): https://skrewww.com/components/checkbox — Checkbox is a native checkbox for independent or multi-select choices, including indeterminate group states.
- Radio (beta): https://skrewww.com/components/radio — Radio is a native radio button for a single option inside a mutually exclusive group.
- Radio Group (beta): https://skrewww.com/components/radio-group — Radio Group is an accessible grouping layer for mutually exclusive radio options with legend, helper text, and errors.
- Switch (beta): https://skrewww.com/components/switch — Switch is a boolean settings control for immediate on/off changes — not a substitute for Checkbox in forms.
- Textarea (beta): https://skrewww.com/components/textarea — Textarea is a multi-line native textarea for longer free-text content, composed with FormField for label and validation.
- Select (beta): https://skrewww.com/components/select — Select is a combobox-style single-select with a Popover listbox trigger and hidden native select for form submission.
- Combobox (beta): https://skrewww.com/components/combobox — Combobox is an editable searchable single-select with a filterable listbox — distinct from non-searchable Select and query-only Search Field.
- Search Field (beta): https://skrewww.com/components/search-field — Search Field is a search-specific text field with leading magnifying-glass icon and optional clear action — built on shared text-input control behavior.
- Date Picker (beta): https://skrewww.com/components/date-picker — Date Picker is a date-only field with editable D MMM YYYY text entry (en-GB) and calendar popover for single-date selection.
- File Upload (beta): https://skrewww.com/components/file-upload — File Upload is a native file input with drag-and-drop dropzone, advisory validation, selected-file list, and multipart form submission — selection only, not network upload.
- Alert (beta): https://skrewww.com/components/alert — Alert is a persistent inline feedback block for contextual status tied to page content — not auto-dismissing.
- Toast (beta): https://skrewww.com/components/toast — Toast is a transient floating notification for confirming actions or reporting short-lived events.
- Progress Bar (beta): https://skrewww.com/components/progress-bar — Progress Bar is determinate or indeterminate progress toward a known or unknown completion point.
- Spinner (beta): https://skrewww.com/components/spinner — Spinner is an indeterminate loading indicator for operations without a meaningful completion percentage.
- Badge (beta): https://skrewww.com/components/badge — Badge is a compact non-interactive label for status, classification, or numeric counts at a glance.
- Tooltip (beta): https://skrewww.com/components/tooltip — Tooltip is a brief supplementary label for a trigger, shown on keyboard focus or pointer hover.
- Skeleton (beta): https://skrewww.com/components/skeleton — Skeleton is temporary placeholder shapes that preserve layout while known content is loading.
- Link (beta): https://skrewww.com/components/link — Link is semantic navigational text styled as inline or standalone links — not for primary actions.
- Breadcrumb (beta): https://skrewww.com/components/breadcrumb — Breadcrumb is an ordered hierarchical trail showing location with navigable ancestors and a current-page indicator.
- Tabs (beta): https://skrewww.com/components/tabs — Tabs is a navigation pattern that switches between related in-context views using tablist/tab/tabpanel semantics and roving focus.
- Pagination (beta): https://skrewww.com/components/pagination — Pagination is a paged navigation control with Previous/Next boundaries, numbered pages, and optional ellipsis.
- Menu (beta): https://skrewww.com/components/menu — Menu is a compact command surface for contextual actions — distinct from Select (form values) and Popover (supplementary content).
- Accordion (beta): https://skrewww.com/components/accordion — Accordion is a set of stacked collapsible sections for progressive disclosure, built from Accordion Item building blocks.
- Dialog (beta): https://skrewww.com/components/dialog — Dialog is a modal overlay that interrupts workflow for focused attention, information, or a decision.
- Popover (beta): https://skrewww.com/components/popover — Popover is a non-modal floating panel for supplementary or lightly interactive content anchored to a trigger.
- Drawer (beta): https://skrewww.com/components/drawer — Drawer is an edge-anchored modal panel for supplementary settings, filters, or secondary forms.
- Tag (beta): https://skrewww.com/components/tag — Tag is a compact classification label for categories, filters, or user-applied values — distinct from read-only Badge status metadata.
- Avatar (beta): https://skrewww.com/components/avatar — Avatar is a circular visual identity for a user or entity with image, initials, or icon fallback.
- Divider (beta): https://skrewww.com/components/divider — Divider is a thin separator line between content sections — horizontal or vertical, semantic or decorative.
- List Item (beta): https://skrewww.com/components/list-item — List Item is a single row inside a collection — avatar, title, description, metadata, and optional trailing content.
- Table (beta): https://skrewww.com/components/table — Table is a native HTML table foundation with captions, headers, body rows, footers, cell alignment, responsive overflow, RTL support, print-friendly scrolling, and composition patterns for empty/loading/error — not the interactive Data Table pattern (no sorting, selection, or pagination).
- Data Table (beta): https://skrewww.com/components/data-table — Data Table is an interactive data-table pattern composing Table with header sorting and external Pagination — no columns-config prop; the consumer writes their own Table/TableHead/TableBody markup and drops in DataTableSortHeader for sortable columns.
- Tree View (beta): https://skrewww.com/components/tree-view — Tree View is a hierarchical, keyboard-navigable tree — file explorers, nested category browsers, org charts. Composes Content/Tree Item rows with roving-tabindex keyboard navigation and depth-based indentation.
- Bar Chart (beta): https://skrewww.com/components/bar-chart — Bar Chart is a single-series, static bar chart built on recharts — real proportional bar heights, month labels below, no Y-axis/gridlines/legend/tooltip.
- Line Chart (beta): https://skrewww.com/components/line-chart — Line Chart is a single-series, static line chart built on recharts — a single stroked path with hollow-ring point markers, no axes/gridlines/legend/tooltip.
- Timeline (beta): https://skrewww.com/components/timeline — Timeline is a vertical, chronological event list built on Content/Timeline Item rows — Default outlined-ring or Highlighted solid-dot markers, connector suppression purely positional.
- Empty State (beta): https://skrewww.com/components/empty-state — Empty State is a zero-content placeholder with title, description, and optional recovery actions for collections, search, or first-use flows.
- Banking Transaction Row (beta): https://skrewww.com/components/banking-transaction-row — Banking Transaction Row is a single financial transaction entry — merchant, date, amount, and status — with a Popover for full transaction detail.
- Banking Account Card (beta): https://skrewww.com/components/banking-account-card — Banking Account Card is a summary card for one financial account — account type, current balance, a compact balance-history sparkline, and an action button.
- Banking Balance Summary (beta): https://skrewww.com/components/banking-balance-summary — Banking Balance Summary is a spending/income overview card with a time-range-filtered Bar Chart and a loading state.
- Calendar Day (beta): https://skrewww.com/components/calendar-day — Calendar Day is a single selectable day cell inside a month calendar grid.
- Calendar Grid (beta): https://skrewww.com/components/calendar-grid — Calendar Grid is a composed month-view calendar with single-date or range selection and grid keyboard navigation.

## Forms architecture (important)
- Controls use native HTML semantics (input, textarea, select, checkbox, radio, switch).
- ValidationMessage's inline feedback is linked to its field via aria-describedby — an accessibility-wiring detail not tracked as a discrete registry field.
- Form Field: https://skrewww.com/components/form-field — Form Field is a shared field wrapper for label, description, required indicator, and validation placement — not a visual input.
- Search Field: https://skrewww.com/components/search-field — Search Field is a search-specific text field with leading magnifying-glass icon and optional clear action — built on shared text-input control behavior.
- Combobox: https://skrewww.com/components/combobox — Combobox is an editable searchable single-select with a filterable listbox — distinct from non-searchable Select and query-only Search Field.
- File Upload: https://skrewww.com/components/file-upload — File Upload is a native file input with drag-and-drop dropzone, advisory validation, selected-file list, and multipart form submission — selection only, not network upload.
- Table: https://skrewww.com/components/table — Table is a native HTML table foundation with captions, headers, body rows, footers, cell alignment, responsive overflow, RTL support, print-friendly scrolling, and composition patterns for empty/loading/error — not the interactive Data Table pattern (no sorting, selection, or pagination).
- Data Table: https://skrewww.com/components/data-table — Data Table is an interactive data-table pattern composing Table with header sorting and external Pagination — no columns-config prop; the consumer writes their own Table/TableHead/TableBody markup and drops in DataTableSortHeader for sortable columns.
- Select: https://skrewww.com/components/select — Select is a combobox-style single-select with a Popover listbox trigger and hidden native select for form submission.

## Figma and React relationship
Figma documents component intent, variants, and tokens. React implementations track Figma where confirmed and document open questions when parity is incomplete. Beta status means production use is possible but APIs and visuals may change.

## Documented components (indexable)
- icon-button: https://skrewww.com/components/icon-button
- button-group: https://skrewww.com/components/button-group
- split-button: https://skrewww.com/components/split-button
- slider: https://skrewww.com/components/slider
- credit-card-field: https://skrewww.com/components/credit-card-field
- phone-number-field: https://skrewww.com/components/phone-number-field
- breadcrumb-item: https://skrewww.com/components/breadcrumb-item
- page-item: https://skrewww.com/components/page-item
- step-item: https://skrewww.com/components/step-item
- menu-item: https://skrewww.com/components/menu-item
- dropdown-trigger: https://skrewww.com/components/dropdown-trigger
- sidebar-nav-item: https://skrewww.com/components/sidebar-nav-item
- top-nav-item: https://skrewww.com/components/top-nav-item
- tree-item: https://skrewww.com/components/tree-item
- timeline-item: https://skrewww.com/components/timeline-item

## Limitations
- File Upload: Figma component-set node ID unresolved — live MCP verification pending.
- File Upload: Temporary file-upload tokens await Figma variable confirmation.
- File Upload: Controlled files prop is intentionally unsupported in this MVP.
- File Upload: Upload progress, retry, preview, and async behavior are deferred.
- Table: Figma component-set node ID unresolved — live MCP verification pending.
- Table: Temporary table geometry and scroll-shadow tokens await Figma confirmation.
- Table: Data Table (implemented 2026-07-15) composes Table for the narrow MVP scope approved 2026-07-13 — sorting only, external Pagination; selection, sticky headers, and density remain excluded from v1.
- Data Table: No Figma component set exists for Data Table yet — sort-header anatomy and token bindings are React-first, same precedent as Table.
- Data Table: Row selection (Checkbox column), sticky headers, density variants, and virtualization remain deferred to a later pass — not in this MVP.
- Data Table: Row-actions conventions beyond composing Menu in a cell are still open.
- Combobox: Figma MCP inspection unavailable in parity pass — component-set node ID and exact token values remain unresolved.
- Combobox: Multi-select chips mode exists in Figma but is deferred in Beta.
- Combobox: Clear control not confirmed via MCP — deferred.
- Combobox: Option leading icons and descriptions not confirmed via MCP — deferred.
- Combobox: Remote/async fetching is not implemented.
- Combobox: Free-form custom values are not supported — closed predefined option list only.
- Combobox: Diacritic-insensitive filtering is not implemented — locale lowercase only.
- Select uses a Popover listbox with a hidden native select for form submission — not searchable (see Combobox for the searchable equivalent).
- Multi-select Combobox and advanced overlays remain documented but not implemented.
- Control-only composition exports are internal implementation details and are not public registry components.