Design token governance
Defines token ownership, aliases and versioning so design decisions reliably reach existing product consumers.
design-token-governance
Included files 1
SKILL.md
← Back to the catalog
Additional members: 6
Frontend and design systems
Team members: 10
Build accessible components, consistent design systems and reliable framework-specific interfaces.
Why add it?
Show less
Frontend and design systems
Build accessible components, consistent design systems and reliable framework-specific interfaces.
Members: Aria, Basil, Cora, Dorian, Elara, Henrik, Iona, Leif, Maeve, and Remy. Includes their complete profiles, portraits and 60 shared supporting skills.
Install the team, then assign it to a project. The shared specialists and their skill dependencies travel together.
What is included
Agents 10
-
Basil
Design token governance specialist
Primary model:
Opus (latest)
I'm Basil, and I turn scattered colors, spacing and themes into shared design rules, helping your products look consistent as teams and brands grow. -
Cora
Accessible headless component engineer
Primary model:
GPT Astra (latest)
I'm Cora, and I build accessible dialogs, menus and form controls that fit your design system and help people complete tasks with their preferred input. -
Dorian
Enterprise design system integration specialist
Primary model:
Gemini Argon (latest)
I'm Dorian, and I help you choose and integrate an enterprise design system that fits your workflows, giving your team a practical foundation for complex interfaces. -
Elara
React and Next.js server-boundary engineer
Primary model:
Opus (latest)
I'm Elara, and I build React and Next.js applications with clear responsibilities for browser and server, keeping sensitive data protected and interactions responsive. -
Henrik
Vue and Nuxt SSR isolation engineer
Primary model:
GPT Astra (latest)
I'm Henrik, and I make Vue and Nuxt applications behave consistently across page loads and navigation, with careful separation of each user's data. -
Iona
Angular business form specialist
Primary model:
Opus (latest)
I'm Iona, and I build complex Angular forms that guide people through business tasks, with clear feedback and careful handling of the work they enter. -
Leif
SvelteKit progressive workflow engineer
Primary model:
Opus (latest)
I'm Leif, and I build SvelteKit business workflows that start with dependable forms and add richer interactions, helping people keep moving through imperfect conditions. -
Maeve
Design system migration specialist
Primary model:
Opus (latest)
I'm Maeve, and I move existing products onto a shared design system in manageable stages, helping your team modernize while continuing to ship useful features. -
Remy
CRM data-grid interaction engineer
Primary model:
Opus (latest)
I'm Remy, and I build CRM tables that make large datasets usable, helping people understand what they have selected and what each action will change. -
Aria
UI/UX designer and design engineer
Primary model:
Opus (latest)
I'm Aria, a UI/UX designer and design engineer who builds distinctive web interfaces, dashboards and landing pages around your users' most important tasks.
Teams 1
-
Frontend and design systems
Skills in this team 60
Explore the skills assigned to this team. Open a card for a clear explanation, a practical example and the agents who use it.
Visual regression tests
Creates stable screenshot comparisons that distinguish intentional visual changes from defects without treating images as proof of interaction correctness.
visual-regression-testing
Included files 1
SKILL.md
Design tokens and themes
Connects visual values to semantic interface roles so themes and component refinements remain consistent.
design-tokens-theming
Included files 1
SKILL.md
Multiple brands and dark mode
Creates consistent theme switching through semantic colors and native browser integration rather than separate fragile component styles.
multi-brand-dark-mode
Included files 1
SKILL.md
Package shared components
Packages UI components and styles as explicit versioned contracts that work across consuming applications and build environments.
component-packaging-versioning
Included files 1
SKILL.md
Migrate design system components
Replaces legacy interface elements in reviewable batches and retires old implementations after verified adoption.
design-system-migration
Included files 1
SKILL.md
Component documentation
Explains component choices and correct usage with realistic examples, documented keyboard behavior and explicit supported limits.
component-documentation-examples
Included files 1
SKILL.md
Accessible headless components
Checks that composed unstyled primitives retain their keyboard, naming and focus behavior in the actual product.
headless-component-accessibility
Included files 1
SKILL.md
Accessibility evidence
Produces an accessibility assessment that distinguishes automated findings, manual interaction checks and actual assistive-technology evidence.
accessibility-testing-evidence
Included files 1
SKILL.md
Keyboard and focus behavior
Designs predictable keyboard navigation and visible focus across widgets, overlays, deletion and route changes.
keyboard-focus-engineering
Included files 1
SKILL.md
Screen-reader compatibility
Checks how assistive technology actually reads and operates an interface, including navigation modes and announcement clarity.
screen-reader-compatibility
Included files 1
SKILL.md
Composable component APIs
Designs shared components with a small predictable interface and flexible composition while retaining native interaction behavior.
component-api-composition
Included files 1
SKILL.md
Accessible forms and errors
Designs forms with persistent labels, useful instructions and validation errors that people can find and correct.
accessible-forms-validation
Included files 1
SKILL.md
Component workbenches and Storybook
Shows meaningful component states in the existing preview environment using the same foundations as production.
storybook-component-workbenches
Included files 1
SKILL.md
Design system adoption
Evaluates design systems against the same representative product work and makes customization and maintenance obligations visible.
enterprise-design-system-adoption
Included files 1
SKILL.md
Verify dependency upgrades
Establishes whether a dependency upgrade actually works through lockfile review, reproducible builds and real integration paths.
compatibility-regression-verification
Included files 1
SKILL.md
Discover reusable components
Finds genuinely shared interface patterns from real usage before extracting new primitives or expanding a design system.
component-inventory-discovery
Included files 1
SKILL.md
License and supply-chain risk
Reviews dependency obligations and operational requirements alongside package provenance and installation behavior.
license-supply-chain-operational-risk
Included files 1
SKILL.md
Framework-native components
Keeps shared visual behavior consistent while implementing components in the conventions of the actual framework.
framework-specific-components
Included files 1
SKILL.md
Compare engineering options
Helps choose between realistic solutions by considering development effort, ongoing maintenance and the consequences of changing course later.
trade-off-lifecycle-cost-analysis
Included files 1
SKILL.md
Business project foundations
Helps choose a reusable application foundation by comparing actual workflow fit, ownership effort and alternatives to building from scratch.
business-project-foundations
Included files 4
SKILL.mdreferences/README.mdreferences/adoption-checklist.mdreferences/repositories.json
React and Next.js server boundaries
Places state, data and mutations across browser and server boundaries with explicit freshness and access rules.
react-next-server-boundaries
Included files 1
SKILL.md
Frontend verification
Checks frontend changes with repository tooling and real browser behavior, then reports precisely what the available evidence covers.
frontend-verification
Included files 2
LICENSE.txtSKILL.md
Enforce server-side policies
Applies the same authorization rules to direct actions, queries, exports and background work, with denied access when context is missing.
server-side-policy-enforcement
Included files 1
SKILL.md
Tenant-safe caches, search and files
Extends tenant isolation beyond database rows to caches, search suggestions, derived indexes and stored file access.
tenant-aware-cache-search-files
Included files 1
SKILL.md
Type-safe contracts
Strengthens application contracts at untrusted boundaries and represents domain states so invalid combinations are harder to construct.
type-safety-contracts
Included files 1
SKILL.md
Analyze performance measurements
Interprets latency, achieved workload and server telemetry to explain bottlenecks and useful successful throughput.
performance-measurement-analysis
Included files 1
SKILL.md
Isolate Vue and Nuxt user requests
Keeps private user state separate during server rendering and checks that navigation and browser startup preserve the correct data.
vue-nuxt-request-isolation
Included files 1
SKILL.md
Tenant isolation verification
Tests tenant boundaries adversarially using comparable data in two workspaces, including indirect relationships and shared infrastructure.
tenant-isolation-verification
Included files 1
SKILL.md
Understand an existing Vue project
Maps a Vue project before implementation so new work fits its actual versions, reusable components and data ownership.
vue-codebase-discovery
Included files 2
LICENSE.txtSKILL.md
Predictable Vue state updates
Organizes reactive state so the interface updates when expected, without duplicated values, looping watchers or abandoned background work.
vue-reactivity
Included files 2
LICENSE.txtSKILL.md
Reusable Vue behavior
Extracts repeated reactive behavior into focused functions with clear inputs, explicit actions and automatic resource cleanup.
vue-composables
Included files 2
LICENSE.txtSKILL.md
Pinia shared state
Places Vue state at the right scope and uses Pinia only for information genuinely shared across views.
pinia-state
Included files 2
LICENSE.txtSKILL.md
Fast Vue interfaces and consistent rendering
Improves slow Vue views by reducing unnecessary work and keeping server-generated pages consistent with the browser’s first render.
vue-performance-ssr
Included files 2
LICENSE.txtSKILL.md
Angular business forms
Designs Angular editing flows around field relationships, server rules, permissions and recoverable save failures.
angular-business-form-architecture
Included files 1
SKILL.md
Verify Angular changes
Checks Angular templates, focused behavior tests and real browser flows before describing a change as complete.
angular-verification
Included files 2
LICENSE.txtSKILL.md
Discover an Angular codebase
Maps installed Angular dependencies, architecture and existing conventions before planning a compatible, focused change.
angular-codebase-discovery
Included files 2
LICENSE.txtSKILL.md
Angular Reactive Forms
Implements typed form controls, cross-field validation and server feedback with a predictable submission lifecycle.
angular-reactive-forms
Included files 2
LICENSE.txtSKILL.md
Angular RxJS data flows
Coordinates asynchronous Angular events with deliberate cancellation, sequencing, error recovery and subscription lifetimes.
angular-rxjs
Included files 2
LICENSE.txtSKILL.md
Field and relationship permissions
Enforces access based on ownership and team relationships, including different visible or editable fields on one record.
field-relationship-permissions
Included files 1
SKILL.md
SvelteKit progressive workflows
Builds server-validated forms that remain useful before JavaScript enhancement and preserve input through failures.
sveltekit-progressive-workflows
Included files 1
SKILL.md
Semantic HTML and accessible names
Makes interface structure, controls and states understandable to assistive technology using meaningful native HTML.
semantic-html-accessible-names
Included files 1
SKILL.md
Browser and device QA
Verifies responsive layouts and real interactions across specified browser sizes, input methods and navigation states.
browser-cross-device-qa
Included files 1
SKILL.md
Design system adoption planning
Plans incremental adoption across product teams with ownership, compatibility and evidence from a representative migrated workflow.
design-system-adoption-migration
Included files 1
SKILL.md
Characterization and regression checks
Records existing behavior at stable boundaries so structural changes can reveal unintended differences.
characterization-regression-checks
Included files 1
SKILL.md
Codemods and deprecated API cleanup
Applies reviewable automated migrations and checks the semantic cases that mechanical transformations can miss.
codemods-deprecation-cleanup
Included files 1
SKILL.md
CRM data grids
Keeps large CRM tables, selections, exports and bulk actions aligned with the same authorized dataset.
crm-data-grid-engineering
Included files 1
SKILL.md
Render large datasets
Reduces and renders large visualization datasets while preserving the analytical features users need to see.
large-dataset-rendering
Included files 1
SKILL.md
Validate metric meaning
Checks whether a dashboard number answers the intended question with correct populations, units and time boundaries.
data-semantics-metric-validation
Included files 1
SKILL.md
Chart tables and exports
Makes visualized numbers inspectable and exportable without losing filters, permissions or spreadsheet safety.
data-export-tabular-alternatives
Included files 1
SKILL.md
Distinctive interface design
Creates a visual direction rooted in the product’s subject, real content and audience while respecting an existing brand.
frontend-design
Included files 2
LICENSE.txtSKILL.md
Frontend implementation
Turns designs into usable interfaces with clear loading and error states, reliable interactions and layouts that work on different screens.
frontend-ui-engineering
Included files 2
LICENSE.txtSKILL.md
Accessible interfaces
Helps people use your interface with a keyboard or screen reader, with readable contrast, clear labels and understandable error messages.
web-accessibility
Included files 1
SKILL.md
Visual interface QA
Finds visible interface defects in real browser states, screen sizes and content extremes before a change is declared finished.
visual-qa
Included files 2
LICENSE.txtSKILL.md
Extend a design system
Builds consistent reusable interface foundations from the project's actual components, tokens and recurring needs.
design-system
Included files 2
LICENSE.txtSKILL.md
Purposeful interface motion
Uses restrained animation to explain state changes and provide feedback while keeping frequent actions quick and accessible.
ui-motion
Included files 2
LICENSE.txtSKILL.md
Visual asset briefs
Turns a page’s communication need into an actionable image brief with composition, delivery formats and brand-specific constraints.
visual-asset-brief
Included files 1
SKILL.md
Faster websites with measured results
Finds the real causes of slow page loading and delayed interactions, then checks improvements using comparable before-and-after measurements.
web-performance
Included files 1
SKILL.md
Landing page conversion
Shapes a landing page around one clear visitor outcome, truthful evidence and a focused next action.
landing-page-conversion
Included files 1
SKILL.md
Mobile application experience
Shapes complete mobile journeys around platform conventions, touch use, network conditions and clear feedback.
mobile-app-ux
Included files 1
SKILL.md
Requirements
- Orqestria installed on your computer.
- A supported model provider configured and signed in when you run an agent.