본문으로 건너뛰기
cccskills
무료GitHub에 공개

astro

Assists with building content-driven websites using Astro's island architecture. Use when creating static sites, blogs, documentation, or marketing pages that ship zero JavaScript by default. Trigger words: astro, static site, island architecture, content collections, SSG, hybrid rendering, astro components.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

TerminalSkills/skills
설치 방법 보기

포함된 파일(2)

  • SKILL.md3.8 KB
  • _scores.json1.6 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Astro

Overview

Astro is a web framework for building content-driven websites that ships zero JavaScript by default. Its island architecture hydrates only interactive components, achieving excellent Lighthouse scores while supporting React, Vue, Svelte, or any UI framework where interactivity is needed.

Instructions

  • When creating pages, use file-based routing in src/pages/ with .astro, .md, or .mdx files, and organize shared structure in src/layouts/.
  • When adding interactivity, use client directives on framework components: prefer client:visible or client:idle over client:load since most components do not need immediate hydration.
  • When managing content, define Content Collections in src/content/ with strict Zod schemas using defineCollection(), and query with getCollection() and getEntry().
  • When choosing rendering modes, default to static (SSG) for marketing and content pages, use output: "server" for dynamic pages, or use hybrid rendering with per-page export const prerender = false.
  • When optimizing images, use the <Image> component from astro:assets for automatic format conversion (WebP/AVIF), resizing, and lazy loading instead of raw <img> tags.
  • When adding page transitions, enable View Transitions with <ViewTransitions /> for SPA-like navigation without shipping a client-side router.
  • When integrating UI frameworks, install the appropriate integration (@astrojs/react, @astrojs/vue, @astrojs/svelte) and use Astro components for static content, reaching for framework components only when interactivity is required.

Examples

Example 1: Build a blog with Content Collections

User request: "Create an Astro blog with type-safe Markdown content"

Actions:

  1. Define a blog Content Collection with Zod schema for frontmatter (title, date, tags, author)
  2. Create dynamic route src/pages/blog/[slug].astro with getStaticPaths()
  3. Build blog index page querying getCollection("blog") with sorting
  4. Add layout with SEO meta tags, navigation, and View Transitions

Output: A statically generated blog with validated content, clean URLs, and smooth page transitions.

Example 2: Add interactive components to a static site

User request: "Add a React search component to my Astro documentation site"

Actions:

  1. Install @astrojs/react integration
  2. Create the React search component with state and event handling
  3. Add the component to the page with client:idle directive
  4. Pass static data as props from the Astro page frontmatter

Output: A documentation site that is fully static except for the interactive search island.

Guidelines

  • Use Astro components (.astro) for static content; only use React/Vue/Svelte when interactivity is needed.
  • Default to client:visible or client:idle over client:load for hydration directives.
  • Define Content Collections with strict Zod schemas to catch content errors at build time.
  • Use astro:assets <Image> over raw <img> tags for automatic optimization.
  • Keep layouts thin with shared <head>, navigation, and footer; put page-specific content in pages.
  • Use hybrid rendering: static for marketing pages, SSR only for personalized or dynamic pages.
  • Enable View Transitions for SPA-like navigation without shipping a router.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

3dsmax-rendering

무료

Scripts and configures production rendering in Autodesk 3ds Max with the V-Ray and Corona renderers: output size and files, render elements, denoising, light mix, batch and command-line rendering, and network rendering. Use when a user asks to set up a production render, render several cameras in one batch, render from the command line or on a render farm, add render passes for compositing, or cut render time for archviz and product shots.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

TerminalSkills/skills1722026년 10월 14일 업데이트

3dsmax-scripting

무료

Covers scripting Autodesk 3ds Max, the 3D modeling and rendering application, with MAXScript and Python (pymxs): scene manipulation, object creation, material assignment, camera and light setup, batch operations, and file I/O. Use when tasks involve automating repetitive 3ds Max workflows, batch processing scenes, running scripts headless with 3dsmaxbatch, creating custom tools, or scripting scene setup for archviz, product visualization, or VFX.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

TerminalSkills/skills1722026년 10월 14일 업데이트

3proxy

무료

3proxy is a small open-source proxy server that runs HTTP/HTTPS, SOCKS4/5, SNI and TCP/UDP port-mapping proxies from one config file. Use when a user asks to set up an HTTP or SOCKS5 proxy, add proxy users and passwords, write 3proxy access rules, chain or rotate upstream (parent) proxies, limit bandwidth, connections or monthly traffic per user, run 3proxy in Docker, or fix a 3proxy.cfg that will not start.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

TerminalSkills/skills1722026년 10월 14일 업데이트

a2a-protocol

무료

Builds Agent2Agent (A2A) servers and clients, the open protocol (originally from Google, now under the Linux Foundation) that lets AI agents from different frameworks call each other. Use when the user wants to create an A2A-compliant agent, build an Agent Card, implement task management, connect agents across frameworks, set up agent discovery, handle streaming responses, implement push notifications, or orchestrate multi-agent workflows. Trigger words: a2a, agent to agent, agent2agent, a2a protocol, a2a server, a2a client, agent card, agent interoperability, agent collaboration, multi-agent, agent discovery, a2a sdk, a2a task.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

TerminalSkills/skills1722026년 10월 14일 업데이트

ab-test-setup

무료

Plans a controlled experiment (A/B test) so its result can be trusted: writes the hypothesis, picks one primary metric and the guardrails, computes sample size and run time, specifies how visitors are assigned and when exposure is logged, and reads out the result with a confidence interval. Use when someone says "set up an A/B test", "split test this page", "how many visitors do I need", "how long should the experiment run", "is this result significant", "can I stop the test early", or wants to test a headline, price, layout or onboarding change against the current version.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

TerminalSkills/skills1722026년 10월 14일 업데이트

ably

무료

Ably is a hosted realtime messaging service: clients publish and subscribe to named channels over WebSockets, see who is present, replay message history, and resume after a dropped connection. Use when a user asks to "add realtime updates", "push live notifications to the browser", "show who is online", "add a chat room with typing indicators", "publish from a serverless function", or "authenticate Ably clients without exposing the API key". Covers the ably 2.x JavaScript SDK (Realtime and REST), JWT token authentication, presence, history and rewind, batch publishing, and the @ably/chat 1.x SDK.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

TerminalSkills/skills1722026년 10월 14일 업데이트

TerminalSkills의 스킬 모두 보기

이 스킬의 문제 신고