blog-frontend

Scaffold SvelteKit blog pages with shadcn-svelte design guidelines.

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/jjc4480/my-blog --skill blog-frontend
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: blog-frontend
Source: https://github.com/jjc4480/my-blog/tree/main/.claude/skills/blog-frontend
Command: npx skills add https://github.com/jjc4480/my-blog --skill blog-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes references (resource) components.

What problem does it solve?

Provides a design-guided frontend scaffold for a SvelteKit + shadcn-svelte blog, reducing boilerplate and ensuring UI consistency across pages.

Core Features & Use Cases

  • Layout and typography guidelines: fixed content width, balanced line-height, and clear heading hierarchy to enhance readability.
  • Color and component standards: a mono base with a single accent color, customized palettes, and minimal interactive effects.
  • Project structure and guidance: predefined routes for home, posts, tags, categories, and search, plus references to design-refs.md.
  • Shadcn-svelte integration: add necessary components via CLI and apply custom styles for consistency.

Quick Start

Initialize the blog frontend scaffold using the provided design principles and start by implementing the home route and a PostCard component.

Frequently Asked Questions about blog-frontend

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

FAQPage Schema
How do I build a SvelteKit blog with shadcn-svelte UI components?โ–ผ

A design-driven scaffold for a SvelteKit blog applies layout, typography, and color guidelines to construct home, post list, and detail pages, ensuring UI consistency while reducing boilerplate. It uses predefined routes for tags, categories, and search, plus references to design guidelines.

How do I ensure consistent typography and layout in frontend blog development?โ–ผ

Consistent typography and layout in frontend blog development are achieved by applying a scaffold with a fixed content width, balanced line-height, and clear heading hierarchy. This enforces readability standards across all blog post detail views and home page layouts.

Can I use shadcn-svelte to build a scalable blog frontend?โ–ผ

You can use shadcn-svelte to build a scalable blog frontend by adding necessary components via CLI and applying custom styles. The scaffold provides predefined routes for home, posts, tags, categories, and search to ensure clear project architecture.

What is the best way to structure a SvelteKit blog project for UI consistency?โ–ผ

The best way to structure a SvelteKit blog project for UI consistency is to use a scaffold with predefined routes for home, posts, tags, categories, and search, paired with a mono base color, a single accent color, and minimal interactive effects.

Does a design-driven SvelteKit scaffold support custom color palettes and components?โ–ผ

A design-driven SvelteKit scaffold supports custom color palettes and components by applying a mono base with a single accent color, customized palettes, and minimal interactive effects, while integrating shadcn-svelte components for consistent styling.