maxwell2732/claudecode-research-harness-workflow/ui

Claude Code and agent skill by maxwell2732/claudecode-research-harness-workflow

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

Explicit helper for UI components, hero sections, forms, feedback, and contact surfaces. Do NOT load for: authentication, backend implementation, database work, or business logic.

Install

npx vskill@latest install maxwell2732/claudecode-research-harness-workflow/ui

SKILL.md

UI Skills

A set of skills responsible for generating UI components and forms.

Constraint Priority and Applicability

  1. By default, apply the constraints in ${CLAUDE_SKILL_DIR}/references/ui-skills.md with highest priority.
  2. Apply ${CLAUDE_SKILL_DIR}/references/frontend-design.md only when "sharp/distinctive/expressive/brand-focused" is explicitly requested.
  3. UI Skills MUST/NEVER rules are maintained in principle. However, the following exceptions are allowed only when the user explicitly requests them:
  • Gradients, glow effects, strong decorations
  • Animations (additions/extensions)
  • Custom easing

Feature Details

FeatureDetails
Constraint SetSee references/ui-skills.md / references/frontend-design.md
Component GenerationSee references/component-generation.md
Feedback FormsSee references/feedback-forms.md

Execution Steps

  1. Apply constraint set (follow priority order)
  2. Quality gate (Step 0)
  3. Classify the user's request
  4. Read the appropriate reference file from "Feature Details" above
  5. Generate following its instructions
Step 0: Quality Gate (Accessibility Checklist)

When generating UI components, ensure accessibility:

markdown
♿ Accessibility Checklist
 
It is recommended that the generated UI meets the following:
 
### Required
-[ ] Set alt attributes on images
-[ ] Associate labels with form elements
-[ ] Keyboard operable (Tab to move focus)
-[ ] Focus state is visually apparent
 
### Recommended
-[ ] Information not conveyed by color alone
-[ ] Contrast ratio 4.5:1 or higher (text)
-[ ] Appropriate use of aria-label / aria-describedby
-[ ] Heading structure (h1 → h2 → h3) is logical
 
### Interactive Elements
-[ ] Buttons have appropriate labels (e.g., "View product details" not just "Details")
-[ ] Focus trap in modals/dialogs
-[ ] Error messages are read by screen readers
For VibeCoder
markdown
♿ Making designs usable by everyone
 
1.**Add descriptions to images**
   -"Red sneakers, front view" not just "Product image"
 
2.**Make clickable areas keyboard-accessible too**
   -Move with Tab key, confirm with Enter
 
3.**Don't rely on color alone**
   -Not just red=error; also use icon + text

Security

  • Security scanPassed, 90 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

7-day trend score
5

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/maxwell2732/claudecode-research-harness-workflow/ui/badge)](https://verified-skill.com/skills/maxwell2732/claudecode-research-harness-workflow/ui)

Something wrong with this skill or its page? Tell us.