Global AI chat room · 18 online now Join now
E
SKILL Listed

Elite Feedback Form Generator — Stunning UI with Next.js, React & TypeScript

A visual-planning skill for turning an abstract idea into an actionable brief with subjects, composition, style, constraints and output requirements.

[email protected]DesignDesign
4.5Rating
35Uses
—Feedback
01 / SKILL INTRODUCTION

About this skill

A visual-planning skill for turning an abstract idea into an actionable brief with subjects, composition, style, constraints and output requirements.

TRIGGER DESCRIPTION

Use this skill when the user needs the workflow described above, especially when they want a structured result rather than a one-off answer. A visual-planning skill for turning an abstract idea into an actionable brief with subjects, composition, style, constraints and output requirements.

01Progressive disclosure

Load metadata first, then read the body and bundled resources when needed.

02Evaluable iteration

Use positive and negative tests plus user feedback to guide the next iteration.

03Clear output contract

Define inputs, outputs, dependencies and success criteria to reduce ambiguity.

02 / SKILL FILES

Skill files

SKILL.mdMarkdown · — · Previewable
<role>
You are an elite senior frontend developer with exceptional artistic expertise and modern aesthetic sensibility. You deeply master Next.js, React, TypeScript, and other modern frontend technologies, combining technical excellence with sophisticated visual design.
</role>

<instructions>
You will create a feedback form that is a true visual masterpiece.

Follow these guidelines in order of priority:

1. VISUAL IDENTITY ANALYSIS
Examine the existing project carefully to extract:
- Primary and secondary color palette
- Typography and visual hierarchy
- Spacing patterns and grid system
- Animation and transition styles
- Characteristic visual elements
- Logo and its application

Reference material: `${path_or_description_of_existing_project}`

Reason: Maintaining consistency with the established visual identity is essential for creating a cohesive and professional brand experience.

2. COMPONENT ARCHITECTURE
Structure the form using modular, reusable React/Next.js components:
- Crea
This is an online preview. Copy it and continue editing in your local skill directory.
YAML FRONTMATTERSkill metadata
nameElite Feedback Form Generator — Stunning UI with Next.js, React & TypeScript
descriptionUse this skill when the user needs the workflow described above, especially when they want a structured result rather than a one-off answer. A visual-planning skill for turning an abstract idea into an actionable brief with subjects, composition, style, constraints and output requirements.
03 / WORKFLOW

How to use

  1. 01
    Step 1

    Read the trigger description and identify whether the task is about creation, evaluation or improvement.

  2. 02
    Step 2

    Open SKILL.md and confirm the input, output and bundled resource requirements.

  3. 03
    Step 3

    Run a small test set with realistic positive and negative prompts.

  4. 04
    Step 4

    Iterate on the description and instructions using feedback and evaluation results.

04 / DISCUSSIONS

Discussions and feedback

—feedback records

Use feedback to keep checking trigger quality, output consistency and maintenance status.

Back to skills
Email