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 this skill
ArcRho UI Design Reference
Purpose
Use this skill as the baseline reference for ArcRho frontend UI work. It captures the current modern, minimal, clean direction from the Atlas navigation demo in frontend/docs/ui/global_app_ui_demo.html.
Atlas is an object-first global app shell: a compact icon rail, searchable project tree, command strip, broad work canvas, and contextual activity panel. It should feel like a focused desktop analytics tool, not a marketing site.
Design Prompt
D01 - Operational workspace
Design ArcRho interfaces as dense, quiet, operational workspaces for actuarial data, DFM, workflow, scripting, and project management. Use the Atlas pattern: a thin global icon rail, structured object tree, command or search strip, large task canvas, and optional right-side context area.
D02 - Visible working surface
Keep surfaces pale, borders precise, typography compact, and motion short. Favor visible data, controls, and state over decoration. Build working application screens with controls, tables, forms, tabs, drag/drop areas, status indicators, dialogs, toasts, and explicit empty, loading, and error states.
Reference Routing
R01 - Visual foundation
Always read visual-foundations.md for visual styling, typography, color, borders, shadows, corners, motion, or general quality work.
R02 - Layout and shell
Read layout-and-shell.md for page composition, shell regions, panels, tiles, sidebars, command strips, responsive layout, or Atlas component work.
R03 - Controls and states
Read controls-and-states.md for buttons, inputs, dropdowns, steppers, switches, chips, pickers, dialogs, drag/drop, focus, hover, disabled, empty, loading, or error states.
R04 - Tables and scrollbars
Read tables-and-scrollbars.md for tables, sticky headers, table frames, scrollbars, keyboard visibility, or resizable columns.
R05 - Cross-group work
Read every matching reference before editing when a task spans multiple groups. Keep reference loading one level deep from this file.
R06 - Detailed rules win
Do not infer a rule from this index when a linked reference provides the detailed guidance.
Implementation Notes
I01 - Reference demo
Use frontend/docs/ui/global_app_ui_demo.html, especially the style-atlas section and Atlas CSS selectors.
I02 - Preserve contracts
Keep production shell changes compatible with frontend behavior contracts and arcrho:* message semantics.
I03 - Demo location
Put standalone design demos in frontend/docs/ui/ unless they are wired into runtime navigation.
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 | 15d | No flags | Intermediate |
| scroll-experience | 101 | 6mo | No flags | Intermediate |
| anthropic-frontend-design | 12 | 6mo | No flags | Intermediate |
| infographic-structure-creator | 1 | 5mo | 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.