skills.rest
stancodev
stancodevCOMMUNITY
Explore all skills by this author →
GitHub

componente-mobile

Standardize mobile UI component development with design tokens for Next.js/React projects.

Updated Mar 24, 2026
Search Tags:#design#accessibility#react#mobile#ui-components#design-tokens
One-click install
npx skills add https://github.com/stancodev/obigode --skill componente-mobile
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: componente-mobile
Source: https://github.com/stancodev/obigode/tree/main/.claude/skills/componente-mobile
Command: npx skills add https://github.com/stancodev/obigode --skill componente-mobile

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardize and accelerate the creation of mobile-first UI components across the OBigode platform, reducing duplication and ensuring a cohesive user experience.

Core Features & Use Cases

  • Reusable mobile UI patterns aligned with the OBigode design tokens (base zinc, amber accent, rounded-xl) for consistency.
  • Clear guidelines for typography, spacing, accessibility, and responsive behavior to speed up delivery.
  • Use cases include building buttons, cards, navigation, and modals that match the mobile-first aesthetic.

Quick Start

Create a reusable mobile UI component following the OBigode design tokens and patterns.

Frequently Asked Questions about componente-mobile

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

FAQPage Schema
How do I standardize mobile UI components with consistent design tokens in React?▼

Build reusable mobile UI components using predefined design tokens like base zinc, amber accent, and rounded-xl. This approach ensures cohesive visuals, consistent spacing, and accessible patterns across your mobile-first interface components.

What are mobile UI design tokens and how do they accelerate component development?▼

Mobile UI design tokens are predefined visual variables like base zinc, amber accent, and rounded-xl. They accelerate development by providing a standardized styling foundation, reducing duplication and ensuring cohesive user experience across buttons, cards, and modals.

How do I build accessible mobile UI components for Next.js projects?▼

Build accessible mobile UI components for Next.js by following specified accessibility considerations and mobile-first patterns. This provides clear guidelines for typography, spacing, and responsive behavior to ensure usable mobile interfaces.

Does this mobile UI component guidance work for both designers and front-end engineers?▼

Yes, this guidance works for both UI designers and front-end engineers. It bridges the gap by standardizing design tokens and component architecture, ensuring consistent implementation of mobile-first interfaces in Next.js and React projects.

What is the best way to create reusable mobile UI patterns like buttons and modals?▼

The best way to create reusable mobile UI patterns like buttons and modals is to align them with standardized design tokens for color and shape. This ensures consistent responsive behavior and accessibility across the mobile-first aesthetic.

Related Skills

Explore More Design & Creative Skills→
bkywksjbkywksj
309

ui-frontend

Define standardized React UI patterns for Tauri desktop apps.

Community
Intermediate
coreymaypraycoreymaypray
1

ui-designer

Create token-based UI systems and component libraries for mobile and web projects.

Community
Advanced
wpgauravwpgaurav
14

modern-frontend-design

Transform prompts into premium UI blueprints for React/Next.js SaaS frontends.

Community
Advanced
BangDoriBangDori
11

design-system

Document Prowl's Liquid Glass design system with Tailwind CSS tokens.

Community
Basic