Skip to main content

Frontend Accessibility

Build accessible user interfaces using semantic HTML, proper ARIA attributes, keyboard navigation, color contrast, and screen reader compatibility. Use this skill when creating or modifying frontend components, HTML templates, React/Vue/Svelte components, forms, interactive elements, navigation menus, modals, or any UI elements. Apply when working with HTML files, JSX/TSX components, template files, ensuring keyboard accessibility, implementing focus management, adding alt text to images, creating form labels, testing with screen readers, managing ARIA attributes, maintaining color contrast ratios, or building heading hierarchies. Use for any task involving UI accessibility compliance, WCAG standards, or inclusive design patterns.

星标

7

分支

0

更新时间

2025年10月29日 14:48

下载技能文件

下载包含 SKILL.md 和所有相关文件的完整技能目录

相关技能

maxritter

Global Error Handling

maxritter

Implement robust error handling with user-friendly messages, specific exception types, fail-fast validation, centralized error handling, graceful degradation, retry strategies, and proper resource cleanup. Use this skill when implementing error handling logic, try-catch blocks, exception handling, error boundaries, validation checks, API error responses, or resource cleanup. Apply when writing error handling in API controllers, service layers, frontend error boundaries, input validation, external service calls with retry logic, error logging, user-facing error messages, finally blocks for resource cleanup, or when establishing centralized error handling patterns at application boundaries. Use for any task involving exception handling, error recovery, graceful failure, or user error communication.

7web-app-development
maxritter

Frontend CSS

maxritter

Write consistent, maintainable CSS following the project's methodology (Tailwind, BEM, utility classes, CSS modules) with design system adherence and performance optimization. Use this skill when writing or modifying styles, CSS files, utility classes, CSS-in-JS, styled components, or any styling code. Apply when working with .css, .scss, .module.css files, Tailwind utility classes, styled-components, CSS modules, design tokens (colors, spacing, typography), framework-specific styling approaches, optimizing CSS for production, implementing CSS purging or tree-shaking, or avoiding style overrides. Use for any task involving visual styling, layout styling, design system implementation, or CSS organization.

7web-app-development
maxritter

Frontend Components

maxritter

Design reusable, composable UI components following single responsibility principle with clear interfaces, encapsulation, and minimal props. Use this skill when creating or modifying frontend components in any framework (React, Vue, Svelte, web components) or component files. Apply when working with .jsx, .tsx, .vue, .svelte files in component directories (components/, src/components/, ui/, lib/), defining component props and interfaces, implementing component composition patterns, managing component-level state, creating reusable UI elements (buttons, forms, cards, modals), documenting component APIs, or refactoring components for better reusability and maintainability.

7web-app-development
maxritter

Frontend Responsive

maxritter

Build responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes. Use this skill when creating or modifying UI layouts, responsive grids, breakpoint styles, mobile navigation, or any interface that needs to adapt to different screen sizes. Apply when working with responsive CSS, media queries, viewport settings, flexbox/grid layouts, mobile-first styling, breakpoint definitions (mobile, tablet, desktop), touch target sizing, relative units (rem, em, %), image optimization for different screens, or testing layouts across multiple devices. Use for any task involving multi-device support, responsive design patterns, or adaptive layouts.

7web-app-development
maxritter

Testing Code Reviewer

maxritter

Systematically review completed code implementations against original plans, requirements, and coding standards to ensure quality, plan alignment, and best practices adherence. Use this skill after completing any significant implementation work including features, refactorings, bug fixes, or architectural changes, when a numbered step or phase from a planning document has been finished, after implementing multiple related functions or components that form a logical unit, when finishing work that was specified in a technical specification or design document, after making substantial changes to existing code or architecture, before creating pull requests to validate implementation quality, when completing API endpoints, service layers, or data access implementations, after implementing test suites for new functionality, when refactoring code to ensure no behavior was inadvertently changed, after integrating with external systems or third-party services, when finishing user-facing features to verify requirements are met, before declaring work complete on any task that had defined acceptance criteria, after implementing security-sensitive features like authentication or authorization, when code has been written based on architectural decisions or design patterns, or whenever a logical chunk of work is done and needs validation against original intent and quality standards.

7web-app-development
alirezarezvani

dependency-auditor

alirezarezvani

Check dependencies for known vulnerabilities using npm audit, pip-audit, etc. Use when package.json or requirements.txt changes, or before deployments. Alerts on vulnerable dependencies. Triggers on dependency file changes, deployment prep, security mentions.

47web-app-development
obra

using-tmux-for-interactive-commands

obra

Use when you need to run interactive CLI tools (vim, git rebase -i, Python REPL, etc.) that require real-time input/output - provides tmux-based approach for controlling interactive sessions through detached sessions and send-keys

28web-app-development
cameronfreer

lean4-theorem-proving

cameronfreer

Use when developing Lean 4 proofs, facing type class synthesis errors, managing sorries/axioms, or searching mathlib - provides build-first workflow, instance management patterns (haveI/letI), and domain-specific tactics

20web-app-development
Toowiredd

session-launcher

Toowiredd

Restores full context when user says "hi-ai" or starts a new conversation. Searches project files, loads memory indexes, reads session state, and creates visual dashboard showing current project, recent decisions, active blockers, and quick actions. Use when user says "hi-ai", "continue", "restore context", or starts a fresh conversation.

11web-app-development
Toowiredd

rapid-prototyper

Toowiredd

Creates minimal working prototypes for quick idea validation. Single-file when possible, includes test data, ready to demo immediately. Use when user says "prototype", "MVP", "proof of concept", "quick demo".

11web-app-development
Toowiredd

browser-app-creator

Toowiredd

Creates complete single-file HTML/CSS/JS web apps with localStorage persistence, ADHD-optimized UI (60px+ buttons), dark mode, and offline functionality. Use when user says "create app", "build tool", "make dashboard", or requests any browser-based interface.

11web-app-development
wordflowlab

novel-writer-workflow-guide

wordflowlab

Use when user starts a novel project or asks how to organize their writing - guides through novel-writer's seven-step methodology and ensures proper workflow

9web-app-development
Frontend Accessibility - maxritter 的 Claude AI 技能 | SkillsMP