skills.rest
mo7amedElfadil
mo7amedElfadilCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate React, TypeScript, Vite, Tailwind CSS, and shadcn/ui interfaces for the ITSQ BidOps platform.

Updated Aug 27, 2026
Search Tags:#typescript#frontend#react#shadcn/ui#tailwind css#ui design
One-click install
npx skills add https://github.com/mo7amedElfadil/bidOps --skill frontend-design-mo7amedelfadil
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mo7amedElfadil/bidOps/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/mo7amedElfadil/bidOps --skill frontend-design-mo7amedelfadil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the creation of professional, brand-consistent frontend interfaces for the ITSQ BidOps platform, ensuring seamless integration with the existing tech stack and design system.

Core Features & Use Cases

  • Component Generation: Creates React components, pages, panels, or workspaces based on user requirements.
  • Design System Adherence: Strictly uses provided design tokens for colors, typography, and spacing, supporting both light and HyprDark themes.
  • Tech Stack Integration: Generates code compatible with React 18, TypeScript, Vite, Tailwind CSS, and shadcn/ui.
  • Use Case: A user needs a new "Opportunity Details" page with a Kanban view for bid stages. This Skill will generate the React components, apply the correct styling using Tailwind and shadcn/ui, and ensure it fits the BidOps design language.

Quick Start

Generate a React component for a new bid status badge using the primary color token.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate production-grade React UI components using TypeScript and Tailwind CSS?▼

Generate production-grade React UI components by providing layout requirements to produce TypeScript code styled with Tailwind CSS and shadcn/ui. This process outputs professional interfaces adhering to strict design tokens for enterprise software.

How do I implement dual-theme support with light and dark modes in a React and Vite application?▼

Implement dual-theme support in a React and Vite application by applying predefined design tokens for colors, typography, and spacing. This generates components compatible with both light and HyprDark themes for seamless visual switching.

Can I use shadcn/ui with React 18 and TypeScript to build enterprise software interfaces?▼

Yes, you can use shadcn/ui with React 18 and TypeScript to build enterprise software interfaces. It generates code strictly compatible with your Vite stack, ensuring professional aesthetics suitable for complex platform UIs.

What is the best way to create a Kanban view for bid stages using React and Tailwind CSS?▼

The best way to create a Kanban view for bid stages using React and Tailwind CSS is to generate production-ready components tailored to your specific layout requirements. This outputs scannable, professional interfaces matching your platform's design language.

Does generating frontend interfaces with shadcn/ui support strict design system adherence?▼

Yes, generating frontend interfaces with shadcn/ui supports strict design system adherence. It enforces provided design tokens for spacing and typography, ensuring seamless integration with existing tech stacks and dual-theme constraints.

Related Skills

Explore More Design & Creative Skills→
DYAI2025DYAI2025
3

artifacts-builder

Create React/TypeScript HTML artifacts with Tailwind CSS and shadcn/ui.

Community
Advanced
CANTAGESTUDIOCANTAGESTUDIO
3

brand-guidelines-enforcer

Enforce brand guidelines on UI copy and visual motifs using a Python script.

Community
Intermediate
Impertio-StudioImpertio-Studio

tailwind-core-design-system

Guide Tailwind CSS design tokens, configuration, and responsive patterns.

Official
Advanced
staruhubstaruhub
662

ui-analyzer

Analyze UI design screenshots to generate React TypeScript components with Tailwind CSS.

Community
Intermediate