Skill
account-research
Research a company or person and get actionable sales intel. Works standalone with web search, supercharged when you connect enrichment tools or your CRM.…
@charlieviettqView SkillDevelopment
Skill
/frontend-ui-accessibility
Build accessible UI—semantic HTML, keyboard support, ARIA when needed, WCAG-oriented checks. Use when implementing or reviewing web UI, forms, modals, and design systems.
Install
$ npx -y skills add charlieviettq/awesome-agent-skill --skill frontend-ui-accessibility --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/frontend-ui-accessibility
Context preview
The summary Claude sees to decide when to auto-load this skill.
Build accessible UI—semantic HTML, keyboard support, ARIA when needed, WCAG-oriented checks. Use when implementing or reviewing web UI, forms, modals, and design systems.
SKILL.md
frontend-ui-accessibility.SKILL.mdname: frontend-ui-accessibility description: "Build accessible UI—semantic HTML, keyboard support, ARIA when needed, WCAG-oriented checks. Use when implementing or reviewing web UI, forms, modals, and design systems." allowed-tools: Read, Glob, Grep
Frontend UI and accessibility
Defaults
- Semantic HTML first; ARIA only when native semantics insufficient
- Keyboard-operable for every interactive control
- Visible focus states; do not remove outlines without replacement
- Color contrast and non-color-only status cues
Build checklist
- [ ] Heading hierarchy (`h1` once per view where applicable)
- [ ] Labels tied to inputs (`label`/`for` or `aria-labelledby`)
- [ ] Buttons vs links used correctly
- [ ] Modals: focus trap, `Escape`, return focus on close
- [ ] Images: meaningful `alt` or decorative `alt=""`
- [ ] Dynamic updates: `aria-live` when needed
Review checklist
- [ ] Tab order logical; no keyboard traps
- [ ] Touch targets adequate on mobile
- [ ] Motion respects `prefers-reduced-motion`
- [ ] Forms: errors associated with fields
Performance interaction
Avoid layout thrash; lazy-load below fold; measure LCP/CLS when shipping UI.
Related
- [reference.md](reference.md) — WCAG-oriented checklist
- `performance/performance-optimization` — web vitals
- `gstack/design-review` — visual polish (complementary)
Ships withawesome-agent-skill
Curated skill pack for LLM agents in engineer and science workflow (Cursor & Claude ready).
Get the whole plugin
Other skills on awesome-agent-skill.
@charlieviettqView SkillSkill
agent-evaluation
Evaluate LLM agents and tool-using workflows—task success, tool accuracy, latency/cost, safety, and regression suites. Use when shipping agent features,…
@charlieviettqView SkillSkill
agent-tool-contracts
Design agent tools and CLI surfaces—schemas, naming, errors, idempotency, and discoverability for LLM callers. Use when defining tools for agents, SDKs, or…
@charlieviettqView SkillSkill
algo-ad-bidding
\"Implement and select ad bidding strategies from manual CPC to automated target-CPA and target-ROAS. Use this skill when the user needs to choose a bidding…
@charlieviettqView SkillSkill
algo-ad-budget
\"Optimize advertising budget allocation across campaigns using marginal returns analysis. Use this skill when the user needs to distribute budget across…
@charlieviettqView SkillSkill
algo-ad-ctr
\"Build CTR prediction models for estimating ad click-through rates from features. Use this skill when the user needs to predict click probability, build an ad…
@charlieviettqView Skill