원클릭으로 Manus에서 모든 스킬 실행

frontend-accessibility

스타0

포크0

업데이트2025년 12월 29일 21:33

Build accessible user interfaces following WCAG guidelines with semantic HTML, keyboard navigation, screen reader support, and proper color contrast. Use this skill when creating or modifying UI components, implementing form inputs, adding interactive elements, working with navigation menus, creating modals or dialogs, or handling focus management. Apply when working on React component files (*.tsx, *.jsx), Shadcn/ui components, or any frontend code that users interact with. This skill ensures semantic HTML elements (nav, main, button, etc.) that convey meaning to assistive technologies, keyboard navigation with visible focus indicators (focus:ring-2 focus:ring-offset-2 in Tailwind), sufficient color contrast ratios (4.5:1 for normal text), descriptive alt text for images and meaningful labels for form inputs, screen reader testing and verification, ARIA attributes for complex components when semantic HTML isn't sufficient, logical heading structure (h1-h6 in proper order), and proper focus management in dyna

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

TheophilusChinomona

TheophilusChinomona/theochinomona.tech

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Frontend Accessibility

When to use this skill:

When creating new UI components or interactive elements
When implementing form inputs, buttons, or controls
When building navigation menus, headers, or footers
When creating modals, dialogs, or overlays with Shadcn/ui
When implementing custom interactive widgets
When adding images, icons, or media content
When working with color schemes and visual design
When managing focus states in single-page applications
When implementing keyboard shortcuts or hotkeys
When testing components with screen readers
When working on component files (.tsx, .jsx, components/.)
When reviewing designs for accessibility compliance
When adding visible focus indicators using Tailwind classes
When implementing screen-reader-only content with srOnly utility class

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend accessibility.

Instructions

For details, refer to the information provided in this file: frontend accessibility

이 저장소의 다른 Skills

같은 저장소

backend-api

TheophilusChinomona/theochinomona.tech

Design and implement RESTful API endpoints following REST principles with proper HTTP methods, status codes, resource-based URLs, and rate limiting. Use this skill when creating or modifying API endpoints, route handlers, controllers, or any backend API layer code. Apply when working on files that define API routes (routes/*.ts, controllers/*.ts, api/*.ts, *Controller.cs), implement request/response handlers, establish API versioning, or configure endpoint middleware. Use when building Bun/Express APIs, ASP.NET Core Web APIs, or Next.js API routes. This skill ensures RESTful design with clear resource-based URLs, consistent lowercase hyphenated naming, appropriate HTTP methods (GET, POST, PUT, PATCH, DELETE), proper status codes (200, 201, 400, 404, 500), plural nouns for resources (/users, /products), limited nesting depth (2-3 levels max), query parameters for filtering/sorting/pagination, API versioning strategies, and rate limiting headers in responses.

2025-12-290

backend-migrations

TheophilusChinomona/theochinomona.tech

Create and manage database migrations following best practices for reversibility, zero-downtime deployments, and version control. Use this skill when creating migration files, modifying database schemas, adding or removing tables/columns, managing indexes, or performing data transformations. Apply when working on migration files (migrations/*.ts, migrations/*.sql, *_migration.py), Prisma schema changes, Supabase migrations, or any database evolution tasks. This skill ensures reversible migrations with rollback/down methods, small focused single-change migrations, zero-downtime deployment compatibility, separated schema and data migrations, safe concurrent index creation on large tables, clear descriptive naming conventions, and proper version control practices (never modify deployed migrations).

2025-12-290

backend-models

TheophilusChinomona/theochinomona.tech

Define database models and schemas with proper data types, constraints, relationships, and validation rules for PostgreSQL (Supabase/Bun.sql) and Firestore (Firebase). Use this skill when creating or modifying database models, ORM entity definitions, Prisma schemas, or Firestore document structures. Apply when working on model files (models/*.ts, entities/*.ts, schema.prisma, models/*.py, Models/*.cs), defining database relationships, setting up validation rules, or implementing data integrity constraints. This skill ensures snake_case naming for SQL and camelCase for NoSQL, required timestamps (created_at/updated_at), UUIDs for SQL and auto-generated IDs for Firestore, foreign key constraints with indexed columns, Row Level Security (RLS) policies for Supabase, strict Firestore security rules, normalized data for SQL (3NF) with denormalization for Firestore read performance, and pgvector setup for AI embeddings.

2025-12-290

backend-queries

TheophilusChinomona/theochinomona.tech

Write efficient and secure database queries following best practices for SQL injection prevention, N+1 query optimization, and performance for PostgreSQL (Bun.sql, Prisma, Supabase) and Firestore. Use this skill when writing or modifying database queries, implementing data fetching logic, working with ORMs (Prisma, TypeORM, Entity Framework), using Bun.sql native driver, querying Firestore collections, or implementing caching strategies. Apply when working on service files (services/*.ts, repositories/*.ts, *Service.cs), query builder implementations, data access layers, or any code that fetches or manipulates data. This skill ensures parameterized queries to prevent SQL injection (never interpolate user input), eager loading to prevent N+1 problems, selective column fetching (no SELECT *), strategic indexing on WHERE/JOIN/ORDER BY columns, transactions for related operations, query timeouts for performance, caching expensive queries, prepared statements with Bun.sql for repeated queries, and query-driven mod

2025-12-290

frontend-components

TheophilusChinomona/theochinomona.tech

Structure React 19+ components following best practices for organization, state management, props handling, and code readability with top-down structure and single responsibility principle. Use this skill when creating new React components, refactoring existing components, organizing component logic, managing component state, defining prop interfaces (IComponentProps with I prefix), or implementing component patterns. Apply when working on React component files (*.tsx, *.jsx), Shadcn/ui components, or any frontend component implementations. This skill ensures predictable top-down structure (imports → types/interfaces → component → hooks → derived values → JSX), proper props destructuring with defaults in function signature, manageable component size (split at >300 lines), composition via Shadcn Slot pattern (asChild prop), React 19 patterns (use() hook for promises, useActionState for forms, useOptimistic for immediate feedback), no manual useMemo/useCallback (React Compiler handles memoization), Server Compo

2025-12-290

global-coding-style

TheophilusChinomona/theochinomona.tech

Apply consistent coding style and formatting standards using automated tools (ESLint, Prettier, Ruff) with clear naming conventions, top-down code organization, and appropriate function/component sizing. Use this skill when writing any code in any language, naming files and variables, structuring code within files, organizing imports, configuring linters and formatters, or setting up pre-commit hooks. Apply when working on TypeScript/JavaScript files, Python files, .NET/C# files, configuration files (tsconfig.json, .prettierrc, .eslintrc), or any code that needs consistent formatting and naming. This skill ensures automated formatting with Prettier/Ruff (let tools handle it), ESLint/analyzer enforcement, TypeScript strict mode always enabled, proper naming conventions (PascalCase.tsx for React components, camelCase.ts for utilities, IPascalCase for interfaces with I prefix, PascalCase for types without prefix, camelCase for functions/constants/database fields/API endpoints/JSON keys, no underscore prefix for

2025-12-290

name

Frontend Accessibility

description

Frontend Accessibility

When to use this skill:

When creating new UI components or interactive elements
When implementing form inputs, buttons, or controls
When building navigation menus, headers, or footers
When creating modals, dialogs, or overlays with Shadcn/ui
When implementing custom interactive widgets
When adding images, icons, or media content
When working with color schemes and visual design
When managing focus states in single-page applications
When implementing keyboard shortcuts or hotkeys
When testing components with screen readers
When working on component files (.tsx, .jsx, components/.)
When reviewing designs for accessibility compliance
When adding visible focus indicators using Tailwind classes
When implementing screen-reader-only content with srOnly utility class

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend accessibility.

Instructions

For details, refer to the information provided in this file: frontend accessibility