Applies the ArcRho design system. Use this for clean, operational, and workspace-focused UI layouts.
Install
mkdir -p .claude/skills/arcrho-ui-design && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18829" && unzip -o skill.zip -d .claude/skills/arcrho-ui-design && rm skill.zipInstalls to .claude/skills/arcrho-ui-design
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
ArcRho frontend UI design reference for applying the app's dense, quiet, operational workspace style. Use when Codex is asked to make or fix frontend UI, visual styling, layout, controls, icons, dropdowns, tables, drag/drop areas, empty/loading/error states, or interaction polish in ArcRho; apply these rules during implementation and do not update the skill unless explicitly asked to revise durable design guidance.Key capabilities
- →Apply ArcRho's dense, quiet, operational workspace style
- →Implement visual styling, typography, and layout
- →Design controls, icons, and dropdowns
- →Create tables, drag/drop areas, and scrollbars
- →Develop empty, loading, and error states
- →Ensure interaction polish in ArcRho UI
How it works
The skill uses `visual-foundations.md`, `layout-and-shell.md`, `controls-and-states.md`, and `tables-and-scrollbars.md` as reference. It applies the Atlas pattern for operational workspaces, focusing on visible data and controls.
Inputs & outputs
When to use arcrho-ui-design
- →Style an operational workspace
- →Implement consistent UI controls
- →Create empty/loading/error states
- →Apply ArcRho design tokens
About arcrho-ui-design
Provides reference rules for consistent frontend styling, including typography, layout, and control state. It enforces a dense, workspace-centric aesthetic for operational applications.
ArcRho frontend UI design reference for applying the app's dense, quiet, operational workspace style. Use when Codex is asked to make or fix frontend UI, visual styling, layout, controls, icons, dropdowns, tables, drag/drop areas, empty/loading/error states, or interaction polish in ArcRho; apply th
When not to use it
- →When the task is not related to ArcRho frontend UI
- →When the user explicitly asks to revise durable design guidance
Limitations
- →Does not update the skill unless explicitly asked to revise durable design guidance
- →Requires reading multiple reference documents for complete guidance
- →Production shell changes must be compatible with frontend behavior contracts
How it compares
This skill provides a structured reference for applying ArcRho's specific UI design principles, ensuring consistency across the application, unlike ad-hoc UI development.
Compared to similar skills
arcrho-ui-design side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| arcrho-ui-design (this skill) | 0 | 1mo | No flags | Intermediate |
| scroll-experience | 101 | 7mo | No flags | Intermediate |
| anthropic-frontend-design | 12 | 7mo | No flags | Intermediate |
| infographic-structure-creator | 1 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
anthropic-frontend-design
chaibuilder
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
infographic-structure-creator
antvis
Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and registration.
logo-with-variants
crafter-station
Create logo components with multiple variants (icon, wordmark, logo) and light/dark modes. Use when the user provides logo SVG files and wants to create a variant-based logo component following the Clerk pattern in the Elements project.
design-context
WellApp-ai
Refresh UI/UX context from design system, Storybook, and codebase
add-template
TonnyWong1052
Add new UI style template to the ui-style-react project. This skill should be used when users want to add a new style template with HTML/CSS code, create a new preview page, or register a template in the system. Triggers include "add template", "create new style", "add new template", or when users provide HTML code for a new UI style.