skills.rest
PatricioOsorio
PatricioOsorioCOMMUNITY
Explore all skills by this author →
GitHub

blog-design-system

Scaffold a dark-themed blog UI kit with Astro 5, Tailwind v4, and DaisyUI v5.

Updated Feb 24, 2026
Search Tags:#tailwind#astro#design-system#daisyui#dark-mode#ui-kit#glass-morphism
One-click install
npx skills add https://github.com/PatricioOsorio/astro-devtalles-course --skill blog-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blog-design-system
Source: https://github.com/PatricioOsorio/astro-devtalles-course/tree/main/.agents/skills/blog-design-system
Command: npx skills add https://github.com/PatricioOsorio/astro-devtalles-course --skill blog-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a cohesive set of design guidelines, tokens, components, and starter files to accelerate building a tech-dark blog UI in Astro 5 with Tailwind v4 and DaisyUI v5.

Core Features & Use Cases

  • Token-driven design system tokens and glassmorphism components for a consistent blog UI.
  • Starter project setup for Astro 5+ with Tailwind v4 and DaisyUI v5.
  • Activation via natural-language prompts like design system to enable blog UI kit in agents.

Quick Start

Create a new Astro project and wire in the provided global.css with Tailwind v4 and DaisyUI v5 to bootstrap the blog UI kit.

Frequently Asked Questions about blog-design-system

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

FAQPage Schema
How do I set up a dark-themed blog design system in Astro?▼

A glassmorphism UI kit for Astro blogs provides token-driven design guidelines and components to accelerate building a tech-dark interface. It solves the problem of needing a cohesive, ready-to-use design system with dark mode defaults.

Do I need Tailwind and DaisyUI to use this Astro blog UI kit?▼

Yes, you need an existing Astro project with Tailwind v4 and DaisyUI v5 installed. You must also configure a central global.css file with @import "tailwindcss" and @plugin "daisyui" to bootstrap the UI kit.

How do I activate the blog UI kit using natural language prompts?▼

You activate the blog UI kit by prompting with terms like "design system", "UI kit", or "UI standards". This triggers the automated setup of glass-morphism components and dark mode defaults in your Astro project.

What's the best way to scaffold glass-morphism components for an Astro blog?▼

The best way to scaffold glass-morphism components is using a token-driven design system tailored for Astro 5. It provides starter files and pre-configured DaisyUI v5 components to ensure a consistent tech-dark blog UI.

Does this design system support dark mode by default?▼

Yes, the design system supports dark mode by default. It targets developers building blog projects who want a ready-to-use tech-dark UI kit with glass-morphism components activated by natural-language prompts.

Related Skills

Explore More Design & Creative Skills→
cristianbc2004cristianbc2004

expo-tailwind-setup

Configure Tailwind CSS v4 in Expo apps with NativeWind v5 and react-native-css.

Community
Intermediate
7Lemaitre77Lemaitre7

astro

Create .astro components and configure islands for content-driven websites.

Community
Intermediate
billydeeii136billydeeii136

find-skills

Search for and install additional skills via a command-line interface.

Community
Intermediate
json-choijson-choi

expo-tailwind-setup

Configure Tailwind CSS v4 in Expo projects with NativeWind and Metro setup.

Community
Intermediate