unimanage-frontend

Guide frontend development with conventions for Next.js, TypeScript, Hero UI v3, and Tailwind CSS.

Updated Feb 27, 2025

Search Tags:#typescript #frontend #react #next.js #tailwind css #component development #hero ui

Ready to run

npx skills add https://github.com/tchiphuong/UniManage --skill unimanage-frontend

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: unimanage-frontend
Source: https://github.com/tchiphuong/UniManage/tree/main/.agent/skills/unimanage-frontend
Command: npx skills add https://github.com/tchiphuong/UniManage --skill unimanage-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide and set of conventions for developing and maintaining the frontend components of the UniManage application, ensuring consistency and efficiency.

Core Features & Use Cases

Component Architecture: Understand the structure and categorization of frontend components.
Coding Conventions: Adhere to best practices for TypeScript, component patterns, and styling with Tailwind CSS.
Hero UI Usage: Learn how to effectively use the Hero UI v3 component library.
Internationalization & State Management: Implement multi-language support and manage application state.
Use Case: When developing a new dashboard widget, consult this Skill for the correct component placement, styling guidelines, and Hero UI component selection to ensure it aligns with the project's standards.

Quick Start

Use the unimanage-frontend skill to understand how to create a new reusable button component using Hero UI and Tailwind CSS.

Frequently Asked Questions about unimanage-frontend

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

FAQPage Schema

How do I structure frontend components in a Next.js and TypeScript project?▼

To structure frontend components in a Next.js and TypeScript project, apply categorized component architecture guidelines that define placement, reusability, and boundaries. This ensures consistent component development and maintainable codebases across the application.

What are the coding conventions for Tailwind CSS and Hero UI v3?▼

Coding conventions for Tailwind CSS and Hero UI v3 involve adhering to specific TypeScript patterns and styling guidelines. These standards dictate how to select, implement, and style components effectively to maintain visual and functional consistency throughout the project.

How do I implement internationalization in a Next.js frontend application?▼

To implement internationalization in a Next.js frontend application, use established multi-language support guidelines. These conventions manage translations and state alongside your TypeScript code to ensure consistent language rendering across all interface components.

Can I use Hero UI v3 with an existing Tailwind CSS setup?▼

Yes, you can use Hero UI v3 with an existing Tailwind CSS setup by following specific integration guidelines. The Skill provides conventions for selecting Hero UI components and applying Tailwind CSS styling to seamlessly align with project standards.

What is the best way to manage application state in a TypeScript frontend?▼

The best way to manage application state in a TypeScript frontend is to follow predefined state management guidelines. These conventions ensure efficient data flow and state handling within your Next.js components to maintain overall application stability.