new-composition

Assemble layout primitives and UI atoms into feature-level components in Next.js.

2|Updated Aug 26, 2025

Search Tags:#next.js #tailwind css #ui component #layout primitives #ui atoms

Ready to run

npx skills add https://github.com/vintasoftware/vinta-schedule-frontend-web --skill new-composition

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: new-composition
Source: https://github.com/vintasoftware/vinta-schedule-frontend-web/tree/main/.claude/skills/new-composition
Command: npx skills add https://github.com/vintasoftware/vinta-schedule-frontend-web --skill new-composition

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the need for assembling feature-level components from layout primitives and UI atoms, simplifying the creation of complex UI components like forms, cards, or navigation bars.

Core Features & Use Cases

Component Assembly: Assemble layout primitives and UI atoms into feature-level components.
Feature Folder Structure: Components are organized in feature folders under src/components/.
Use Case: When a user needs to build a form, a card view, a navbar, or any other UI component, this Skill guides the process.

Quick Start

Run the skill with the command: new-composition create <feature>

Frequently Asked Questions about new-composition

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

FAQPage Schema

How do I assemble feature-level components from layout primitives and UI atoms in Next.js?▼

Assembling feature-level components from layout primitives and UI atoms in Next.js involves combining small structural elements into larger UI pieces like forms or navigation bars. This Skill provides a structured guide for creating and testing these compositions.

What is the best way to structure feature components using Tailwind CSS?▼

Structuring feature components using Tailwind CSS is best achieved by organizing them in feature folders under `src/components/`. This approach simplifies managing complex UI compositions like card views and navigation bars.

Do I need existing UI atoms to build a new composition?▼

Building a new composition requires existing UI atoms and layout primitives as building blocks. The Skill assembles these foundational elements into complete feature-level components within a Next.js project.

Can I use this Skill to create forms and navigation bars for a Next.js project?▼

You can use this Skill to create forms, navigation bars, and other feature sections for a Next.js project. It guides the process of combining layout primitives and UI atoms styled with Tailwind CSS.

How do I start building a new UI composition?▼

To start building a new UI composition, run the command `new-composition create <feature>`. This initiates the assembly of layout primitives and UI atoms into the desired feature-level component.

Are there limitations to assembling components with layout primitives?▼

Assembling components with layout primitives is limited to constructing UI pieces within Next.js projects using Tailwind CSS. It focuses on combining existing atoms rather than creating foundational design elements from scratch.