skills.rest
1ZH13
1ZH13COMMUNITY
Explore all skills by this author →
GitHub

damas-frontend

Define frontend implementation conventions for the Damas-MSA web application.

Updated Jun 8, 2026
Search Tags:#frontend#animations#tailwind#tanstack-start#ui-architecture#clerk-auth#checkers
One-click install
npx skills add https://github.com/1ZH13/Damas-MSA --skill damas-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: damas-frontend
Source: https://github.com/1ZH13/Damas-MSA/tree/main/.claude/skills/damas-frontend
Command: npx skills add https://github.com/1ZH13/Damas-MSA --skill damas-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill gives clear implementation conventions for the Damas-MSA web frontend so UI changes stay consistent with the product spec, the shared rules engine, and the app’s accessibility and motion standards.

Core Features & Use Cases

  • Board and move rendering: Build or edit the checkers board, legal move highlighting, drag-and-drop, click-to-move, and multi-jump path handling.
  • Visual polish: Implement the move trail, piece and board skins, theme switching, and Motion-based animations without breaking reduced-motion behavior.
  • App screens and flows: Update lobby, ranking, profile, shop, loading, empty, and error states while keeping Clerk auth gating and API client patterns intact.
  • Use case: When a designer asks to make the board nicer or add a hint button, this Skill tells you how to wire the UI correctly without violating game rules or frontend architecture.

Quick Start

Use the damas-frontend skill to update the Board component so it shows legal moves, preserves drag-and-drop and click interaction, and keeps the move trail, theme, and accessibility behavior correct.

Frequently Asked Questions about damas-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render legal moves on a checkers board using TanStack Start without breaking accessibility?▼

To render legal moves on a checkers board in TanStack Start, apply accessible interaction patterns for drag-and-drop and click-to-move, ensuring multi-jump path highlighting complies with the shared rules engine.

How do I add Motion-based animations to a checkers UI while respecting reduced-motion preferences?▼

Add Motion-based animations for move trails and skin rendering by implementing reduced-motion-aware behavior, ensuring visual polish updates never override user accessibility preferences within the web application.

What is the best way to integrate Clerk auth gating into a TanStack Start checkers lobby and profile screen?▼

Integrate Clerk auth gating by applying established API client patterns to lobby, ranking, and profile routes, ensuring persisted UI state and API conflict handling remain intact across authenticated checkers flows.

Can I use Tailwind to build checkers board skins and theme switching without violating frontend architecture?▼

Yes, you can use Tailwind to implement board skins and theme switching while adhering to UI architecture conventions, ensuring visual updates align with the product specification and shared rules engine.

How do I handle API conflicts and persisted UI state in a multiplayer checkers web app?▼

Handle API conflicts and persisted UI state by following frontend implementation conventions that synchronize UI changes with the shared rules engine, ensuring correct error and empty state rendering.

Why does my checkers frontend lose multi-jump path highlighting during drag-and-drop interactions?▼

Multi-jump path highlighting is lost during drag-and-drop when UI updates deviate from frontend conventions, requiring correct legal-move rendering and accessible interaction patterns to maintain game rule compliance.

Related Skills

Explore More Software Engineering Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
jhlee0409jhlee0409

api-endpoint

Generate secure Next.js API endpoints with Firebase auth and validation.

Community
Advanced
1ZH131ZH13

damas-backend

Coordinates Bun-Hono backend services, MongoDB repositories, Stripe/Clerk webhooks, MOVe validation and AI execution for Damas-MSA platform.

Community
Advanced
sgpropertyanalyticssgpropertyanalytics
2

ui-skills

Enforce React and Tailwind UI constraints for agent-facing interfaces.

Official
Basic