Agent SkillsAgent Skills
stars-end

context-ui-design

@stars-end/context-ui-design
stars-end
1
0 forks
Updated 5/1/2026
View on GitHub

UI theme system, design tokens, Material-UI patterns, and accessibility standards.Handles theme customization, component styling, design system patterns, and accessibility features.Use when working with UI components, theme customization, design system patterns, or accessibility features,or when user mentions Material-UI, MUI components, theme tokens, dark mode, component styling,design system, accessibility, layout issues, styling problems, or ARIA patterns.

Installation

$npx agent-skills-cli install @stars-end/context-ui-design
Claude Code
Cursor
Copilot
Codex
Antigravity

Details

Repositorystars-end/affordabot
Path.claude/skills/context-ui-design/SKILL.md
Branchmain
Scoped Name@stars-end/context-ui-design

Usage

After installing, this skill will be available to your AI coding assistant.

Verify installation:

npx agent-skills-cli list

Skill Instructions

name: context-ui-design description: | UI theme system, design tokens, Material-UI patterns, and accessibility standards. Handles theme customization, component styling, design system patterns, and accessibility features. Use when working with UI components, theme customization, design system patterns, or accessibility features, or when user mentions Material-UI, MUI components, theme tokens, dark mode, component styling, design system, accessibility, layout issues, styling problems, or ARIA patterns. tags: [ui, design, frontend, accessibility]

UI Design

Navigate UI theme system, design tokens, Material-UI patterns, and accessibility.

Overview

Design system and UI consistency for fintech application.

Theme System

  • frontend/src/theme/createPrimeRadiantTheme.ts - Theme factory
  • frontend/src/theme/primeRadiantTokens.ts - Design tokens

UI Components

  • frontend/src/ui/primeRadiant/ - Prime Radiant UI components
  • Material-UI customizations

Component Patterns

  • Search for Modal, Dialog, Button, Card in frontend/src/components/
  • Form patterns
  • Layout patterns

Accessibility

  • ARIA patterns
  • Keyboard navigation
  • Screen reader support

Responsive Design

  • Breakpoints
  • Mobile-first patterns

Documentation

  • Internal: docs/design/UI_SYSTEM.md (create if needed)
  • Internal: docs/design/ACCESSIBILITY.md (create if needed)

Related Areas

  • See context-analytics for analytics UI
  • See context-portfolio for portfolio UI
  • See context-brokerage for brokerage UI

More by stars-end

View all
sync-feature-branch
1

Commit current work to feature branch with Beads metadata tracking and git integration. MUST BE USED for all commit operations.Handles Feature-Key trailers, Beads status updates, and optional quick linting before commit.Use when user wants to save progress, commit changes, prepare work for review, sync local changes, or finalize current work,or when user mentions "uncommitted changes", "git status shows changes", "Feature-Key missing",commit operations, saving work, git workflows, or syncing changes.

parallelize-cloud-work
1

Delegate independent work to Claude Code Web cloud sessions for parallel execution. Generates comprehensive session prompts with context exploration guidance, verifies Beads state, provides tracking commands. Use when user says "parallelize work to cloud", "start cloud sessions", or needs to execute multiple independent tasks simultaneously, or when user mentions cloud sessions, cloud prompts, delegate to cloud, Claude Code Web, generate session prompts, parallel execution, or asks "how do I use cloud sessions".

backend-engineer
1

Backend developer for your project. MUST BE USED for building APIs, database schemas, and backend services. Prioritize speed and simplicity over complex architecture. Use when building API endpoints, designing database schemas, implementing business logic, server-side integrations, backend service architecture, or data model implementation. Invoke when user mentions REST API, GraphQL, database models, SQL queries, ORM, migrations, authentication backend, or server architecture.

merge-pr
1

Prepare PR for merge and guide human to merge via GitHub web UI. MUST BE USED when user wants to merge a PR.Verifies CI passing, verifies Beads issue already closed (from PR creation), and provides merge instructions.Issue closure happens at PR creation time (create-pull-request skill), NOT at merge time.Use when user says "merge the PR", "merge it", "merge this", "ready to merge", "merge to master",or when user mentions CI passing, approved reviews, ready-to-merge state, ready to ship,merge, deployment, PR completion, or shipping code.