Accessibility Standards (a11y)

applying-a11y-standards

Rules for ensuring Accessibility (a11y) across the Tourly app. Use to build inclusive interfaces.

itsmeAlee/Tourly2·0installs0stars

SKILL.md

Full skill instructions

Accessibility Standards (a11y)

When to use this skill

Every time you create a new component or page.
During UI audits.

Best Practices

Semantic HTML: Use <main>, <header>, <footer>, <nav>, and appropriate heading levels.
ARIA Labels: Use aria-label for icon-only buttons.
Keyboard Nav: Ensure all interactive elements have a visible :focus-visible state.
Contrast: Maintain a text-to-background contrast ratio of at least 4.5:1.

Instructions

Tools: Use the axe-core library or Lighthouse to run automated audits.
Alt Text: Every Image must have a descriptive alt attribute.

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/itsmeAlee/Tourly2 --skill applying-a11y-standards

View on GitHub

.agent/skills/applying-a11y-standards/SKILL.md

optimizing-database-indexes
Guidelines for creating efficient database indexes in Appwrite. Use to ensure search and filter operations stay fast.
0 installs
managing-date-selection
Implements the "Restart Logic" for date range selection in the Tourly search widget. Use when building or modifying the date picker, handling check-in/check-out dates, or implementing calendar interaction algorithms.
0 installs
handling-deploy-cicd
Deployment protocols for Vercel/Appwrite. Use for managing production builds and environment variables.
0 installs
formatting-api-responses
Standardizes the structure of internal function results. Use when writing Services or Server Actions.
0 installs

More skills from itsmeAlee

itsmeAlee/Tourly2

writing-utility-helpers

Standardizes frequent utility functions for currency, dates, and strings. Use to maintain consistency in formatting.

0 0

View

itsmeAlee/Tourly2

optimizing-iconography

Rules for using icons efficiently to maintain performance. Use when adding icons from Lucide React.

0 0

View

itsmeAlee/Tourly2

handling-data-fetching

Strategy for fetching data using React Server Components (RSC) and managing cache. Use for initial page loads and SEO-optimized data.

0 0

View

itsmeAlee/Tourly2

managing-design-system

Defines the core visual identity, color tokens, interaction patterns, and signature UI layouts for Tourly. Use when implementing or styling any frontend component to ensure brand consistency.

0 0

View

itsmeAlee/Tourly2