More screenshots

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    Church Design

    1

    Strategic design guidance and visual frameworks for church websites across five distinct ministry-focused styles.

    $12

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned

    Church Design

    Example session with this skill installed

    I need a design for a new homepage for a Reformed Bible church. They want something warm and deep. Use the warm-editorial direction.

    • Read your context and instructions
    • Compiled the church design

    I have designed the homepage layout using the warm-editorial direction. This setup prioritizes serif headlines, earth-toned accents, and high-contrast legibility (1.125rem body text) to create a welcoming, established feel.

    Warm Editorial Homepage Design

    ElementSpecification
    Directionwarm-editorial
    TypographyHeadline: Playfair Display (Serif) / Body: Source Sans Pro (Sans)
    PaletteNavy (#002244), Deep Ochre (#B37D2E), Cream Background (#F9F7F2)
    Radius4px (Soft corner)
    Bible TranslationESV (English Standard Version)

    Structure & Modules

    Hero Section: Large serif headline with a "Plan Your Visit" primary button (Ochre) and "Watch Latest Sermon" secondary button. Uses a collage photo treatment of the actual congregation.
    2. Identity Block: Centered scripture block (Matthew 11:28 ESV) in italicized serif.
    3.

    Service Info: Horizontal bar above the fold listing Sunday Service times (9am & 11am) and the physical address with a "Get Directions" link.
    4. Sermon Grid: Three-column layout featuring the latest series artwork, titles, and dates.
    5. Ministry Hub: High-contrast cards for Kids, Youth, and Small Groups using line-art icons and consistent spacing.
    6. Footer: Persistent "Give" link, social icons, and full contact information.

    Next steps

    1. Replace the placeholder congregation collage with high-resolution original photography.
    2. Verify that the Deep Ochre accent on the Cream background passes the 4.5:1 contrast check for small text.
    3. Map the provided hex codes to your tailwind.config.js or WordPress theme.json.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Church websites often suffer from "church slop"—cluttered layouts, generic stock photos, and poor accessibility that alienates visitors. This skill provides a design system specifically for ministries, ensuring your web project is welcoming, cohesive, and legible for all ages.

    What it does

    • Brand Cohesion: Enforces locked brand constants including radius families, button shapes, and typography across the entire site.
    • Directional Styles: Provides five distinct visual directions ranging from Bold Contemporary to Traditional/Liturgical.
    • Ministry Hub Layer: Manages sub-branding for churches with multiple ministries using specific colors and marks.
    • Accessibility Guardrails: Enforces WCAG AA contrast standards, 18px minimum body text, and motion-safe video fallbacks.
    • Church-Specific Modules: Designs high-intent components like sermon blocks, location cards, and "Plan a Visit" heroes.

    How it works

    1. Initialize: Use the init mode to establish the MINISTRY.md source of truth for brand constants and Bible translations.
    2. Design: Create new pages or specific components like giving CTAs and event cards following your chosen direction.
    3. Refresh: Apply modern design tokens to an existing WordPress theme or static site to update the visual identity.
    4. Audit: Critically review existing pages against the foundational rules and anti-patterns to identify UX friction.

    Frameworks & tools

    This skill is stack-agnostic. It generates design tokens, CSS variables, Tailwind configurations, or WordPress theme.json structures. It uses a Python script for contrast verification.

    Why this beats prompting it yourself

    Generic prompts often result in "corporate" aesthetics or inaccessible thin-weight fonts. This skill understands the unique requirements of ministry, such as the specific hierarchy of service times and the cultural nuances between liturgical and contemporary visual styles.

    Use cases

    • Designing a "Plan a Visit" page that converts first-time visitors into guests.
    • Building a consistent design system for a church with twenty distinct sub-ministries.
    • Auditing a legacy church site for accessibility compliance and modern legibility.
    • Generating a Tailwind theme that aligns with Traditional Liturgical aesthetics.

    Known limitations

    This tool provides design guidance and tokens but does not generate final production code or host images. It requires an existing MINISTRY.md or a quick initialization to function accurately.

    Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Frontend & Web Apps.

    Does not generate final production code or hosting assets. Requires a MINISTRY.md file or initialization for project context. Accuracy depends on user-provided church facts.

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before buying a skill.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill goes through the trust checks below.

    Security scanned

    Checked by our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scan

    Security scan passed 5 days ago

    Software
    Node.jsGit

    Permissions

    Terminal / Shell
    Browser
    Read Files
    Write Files
    Listed5 days ago

    What's inside

    Frequently Asked Questions

    It eliminates "church slop" by enforcing ministry-specific design systems, ensuring your site is accessible, legible for all ages, and visually cohesive rather than looking like a generic corporate template.

    The skill is stack-agnostic and generates design tokens, CSS variables, Tailwind configurations, or WordPress theme.json structures that can be applied to almost any modern web platform.

    Simply use the 'init' command to create your MINISTRY.md file, which acts as the source of truth for your brand constants, preferred Bible translations, and ministry sub-brands.

    Yes, the skill includes a specific 'Audit' mode that reviews your existing pages against WCAG AA contrast standards and modern UX patterns to identify and fix friction for visitors.

    The skill includes five distinct visual directions, including a 'Traditional/Liturgical' framework that prioritizes classic aesthetics while maintaining modern accessibility standards.

    You receive the full design logic for five ministry styles, the contrast verification script, and the ability to generate ministry-specific components like sermon blocks and 'Plan a Visit' flows.

    New in Frontend & Web Apps