skills.rest
abdusamaraie
abdusamaraieCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

designer

Create UI design specifications with theme tokens and RTL requirements.

Updated Mar 10, 2026
Search Tags:#accessibility#design system#ui design#ux#rtl#component specification
One-click install
npx skills add https://github.com/abdusamaraie/codememo.app --skill designer-abdusamaraie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designer
Source: https://github.com/abdusamaraie/codememo.app/tree/main/.claude/skills/designer
Command: npx skills add https://github.com/abdusamaraie/codememo.app --skill designer-abdusamaraie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams avoid unclear UI implementation by transforming product ideas into structured design specifications that frontend engineers can follow.

Core Features & Use Cases

  • Component Blueprints: Defines layouts, spacing, theme tokens, typography, visual states, and implementation handoff details for UI components.
  • Interaction Specifications: Documents animations, transitions, and user behaviors across different component states.
  • Accessibility and RTL Guidance: Ensures designs include accessibility requirements and Arabic-first layout considerations for cross-platform interfaces.

Quick Start

Ask the designer skill to create a complete UI specification for a new component using the project theme tokens and RTL requirements.

Frequently Asked Questions about designer

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

FAQPage Schema
How do I create UI design specifications for frontend implementation?▼

You create UI design specifications by documenting component layouts, spacing, theme tokens, typography, and visual states to provide structured handoff documentation for engineering teams.

What is a component specification and when do I need one?▼

A component specification is a structured blueprint defining layouts, interaction behaviors, and accessibility requirements. You need one to clarify UI implementation before frontend development begins.

How do I document accessibility and RTL requirements for a design system?▼

You document accessibility and RTL requirements by defining Arabic-first layout considerations and visual states within the UI specification, ensuring cross-platform interfaces meet accessibility standards.

Can I plan component interactions and states without writing code?▼

Yes, you can plan component interactions without writing code by documenting animations, transitions, and user behaviors across different component states within the design specification.

Does UI specification require predefined theme tokens?▼

Yes, UI specification requires predefined theme tokens. The specification process mandates theme token usage to ensure consistent styling during frontend implementation.

Related Skills

Explore More Design & Creative Skills→
PiercingXXPiercingXX
1

sleek

Generate implementation-ready minimalist design-system guidance with tokens, component rules, and WCAG 2.2 AA acceptance criteria.

Community
Intermediate
dev-mirzabicerdev-mirzabicer

frontend-ui-ux

Translate design briefs into production-ready frontend UI components.

Community
Advanced
TonyQ-AITonyQ-AI
9

ui-design

Generate UI/UX designs with design tokens and WCAG-compliant accessibility.

Community
Advanced
daffy0208daffy0208
34

UX Designer

Create information architecture, user flows, wireframes, and prototypes for digital products.

Community
Intermediate