pagemade-button

Automates emerald button styling with CSS, Tailwind, and component templates.

Updated Feb 1, 2026

Search Tags:#css #tailwind #design-system #ui-components #ui-styling #button #emerald

Ready to run

npx skills add https://github.com/conglap189/opencode --skill pagemade-button

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pagemade-button
Source: https://github.com/conglap189/opencode/tree/main/skills/pagemade-button
Command: npx skills add https://github.com/conglap189/opencode --skill pagemade-button

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The PageMade Button Skill standardizes button visuals to ensure consistent branding and a cohesive user experience across PageMade apps, reducing design drift and implementation mistakes.

Core Features & Use Cases

Establishes a single emerald color palette and no elevation rules for all buttons (primary, outline, text).
Provides CSS, Tailwind, and component templates for web apps, editors, and back-end dashboards.
Use Case: when building UI components across frontend and editor tooling, ensure button styling consistency.

Quick Start

Apply the emerald-styled button classes to all new and existing UI buttons across frontend and editor components.

Frequently Asked Questions about pagemade-button

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

FAQPage Schema

How do I standardize button styling with Tailwind to prevent design drift?▼

Standardize button styling with Tailwind by applying a unified emerald color palette, focus ring accessibility, and responsive templates across all new and existing UI components to ensure consistent branding and reduce implementation mistakes.

Does this button styling approach enforce any specific CSS accessibility or visual rules?▼

Yes, this button styling approach enforces CSS accessibility rules by mandating a focus ring for keyboard navigation and strictly prohibits elevation effects to maintain a flat, cohesive visual system across web apps.

What is the best way to apply a consistent emerald color palette to UI components?▼

Apply a consistent emerald color palette to UI components by using predefined CSS and Tailwind button templates that cover primary, outline, and text variations, ensuring visual cohesion across frontend and editor tooling.

Can I use these standardized button templates for both frontend pages and editor tooling?▼

Yes, you can use these standardized button templates for both frontend pages and editor tooling, as the styling rules are designed to integrate seamlessly across web apps, back-end dashboards, and component templates.

Are there limitations to the no elevation button styling approach for UI components?▼

The main limitation of the no elevation button styling approach is that it strictly prohibits drop shadows and 3D effects, requiring all visual hierarchy and state changes to be managed purely through emerald color variations.

Why does my UI design system need standardized CSS button templates?▼

Your UI design system needs standardized CSS button templates to eliminate manual styling errors, enforce a cohesive emerald color palette, and maintain accessibility compliance across all frontend and editor interfaces.