تشغيل أي مهارة في Manus بنقرة واحدة

add-template

النجوم٠

التفرعات٠

آخر تحديث٢٥ فبراير ٢٠٢٦ في ٢٠:٤٦

Create or edit Flint Static page templates (HTML with {{tag}} placeholders). Use when adding new page layouts or modifying the structural skeleton of pages.

التثبيت

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

تشغيل في Manus

المصدر

NeoTech

NeoTech/Flint

فتح مستودع GitHub عرض مستودعات المنشئ

تنزيل

تشغيل في Manus

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

مطوّرو الويبمهن الحاسوب والرياضيات·SOC 15-1254

مستكشف الملفات

3 ملفات

SKILL.md

readonly

name	add-template
description	Create or edit Flint Static page templates (HTML with {{tag}} placeholders). Use when adding new page layouts or modifying the structural skeleton of pages.

Add / Edit a Template

Create or modify HTML page templates in themes/default/templates/. Templates define page structure and layout using {{tag}} placeholders — no TypeScript needed.

Trigger Phrases

"Create a new template for [layout]"
"Add a [sidebar / full-width / article] layout"
"Change the page structure for [page type]"
"Move the navigation to the side"
"Make a two-column layout template"
"Add a new page layout"
"Create a template that shows [component] after the content"

When to Use

Adding a new page layout (sidebar, full-width, article, landing page)
Modifying where navigation, content, or footer appear on a page
Composing existing components into a new arrangement

Procedure

1. Check existing templates

Before creating a new template, check themes/default/templates/ — reuse or copy an existing one if close enough.

Name	Purpose
`default`	Standard page (nav, content, label footer)
`blank`	Minimal shell (content + scripts only)
`blog-post`	Article layout with byline header
`shop`	Shop layout with cart widget
`agent-info`	Two-column with sidebar (skills page)

2. Create the file

Create the template in the active theme's directory: themes/<THEME>/templates/<name>.html (check THEME in .env). To make a template available to all themes, use themes/default/templates/<name>.html — themes overlay on top of default and inherit any templates they don't override. Start from this skeleton:

{{head}}
<body class="min-h-screen bg-gray-50">
    <div id="app" class="flex flex-col min-h-screen overflow-x-hidden">
        {{#if navigation}}{{navigation}}{{/if}}
        <main class="flex-grow max-w-4xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-8">
            {{content}}
        </main>
        {{#if label-footer}}{{label-footer}}{{/if}}
    </div>
    {{foot-scripts}}
</body>
</html>

3. Place tags

Required in every template:

{{head}} — opens <!DOCTYPE>, <html>, <head> with meta/CSS
{{content}} — compiled Markdown body
{{foot-scripts}} — closing <script> tags before </body>

Optional structural tags: {{navigation}}, {{label-footer}}, {{blog-header}}, {{cart}}, {{gadget}}

Data-driven tags (read from frontmatter): {{product}}, {{skill-cards}} — these return '' when the page's frontmatter lacks the required fields, so always use {{#if}} guards.

Optional scalar tags: {{title}}, {{description}}, {{author}}, {{category}}, {{formatted-date}}, {{reading-time}}

Fragments: {{category-pill}}, {{label-badges}}

Conditionals: Wrap optional tags so pages without data render cleanly:

{{#if navigation}}{{navigation}}{{/if}}

See references/tag-reference.md for full tag details.

4. Style with Tailwind

Use Tailwind utility classes directly in the HTML. No <style> tags or external CSS links.

5. Wire it up

Set Template: <name> in content frontmatter files that should use this layout.

6. Build

bun run build

Constraints

No <script> tags — client JS is bundled by Rspack from src/client/
No loops or complex logic — if you need loops, create a component
No hard-coded text content — page text comes from Markdown content
No hard-coded data — product prices, post titles come from frontmatter via tags
No reusable HTML patterns — if it appears in multiple templates, make it a component

References

references/tag-reference.md — Complete list of all available {{tag}} placeholders with descriptions
references/examples.md — Real template examples from the codebase

المزيد من هذا المستودع

نفس المستودع

add-component

NeoTech/Flint

Create or edit Flint Static UI components (TypeScript classes extending Component<T>). Use when building reusable server-rendered UI that appears across multiple pages via {{tag}} placeholders in templates.

2026-02-250

add-content

NeoTech/Flint

Create or edit Flint Static content pages (Markdown + YAML frontmatter). Use when adding pages, blog posts, section indexes, or products to the site.

2026-02-250

add-documentation

NeoTech/Flint

Create or edit Flint Static developer documentation (docs/*.md). Use when adding architecture docs, API references, system deep-dives, or updating existing documentation to reflect code changes.

2026-02-250

build-and-test

NeoTech/Flint

Build the Flint Static site and run tests. Use when compiling Markdown to HTML, running Bun tests, type-checking, linting, or debugging build/test issues.

2026-02-250

deploy

NeoTech/Flint

Deploy the Flint Static site and/or checkout worker to Cloudflare Pages, Vercel, Netlify, or GitHub Pages. Use when asked to "deploy the site", "push to production", "deploy to Cloudflare", "deploy the worker", or "deploy checkout server".

2026-02-250

design-to-template

NeoTech/Flint

Build a Flint Static template by analysing a URL or image. Use when a user says "build this", "clone this site", "make a template from this URL", or provides a screenshot and asks to replicate the design.

2026-02-250

name	add-template
description	Create or edit Flint Static page templates (HTML with {{tag}} placeholders). Use when adding new page layouts or modifying the structural skeleton of pages.

Add / Edit a Template

Create or modify HTML page templates in themes/default/templates/. Templates define page structure and layout using {{tag}} placeholders — no TypeScript needed.

Trigger Phrases

"Create a new template for [layout]"
"Add a [sidebar / full-width / article] layout"
"Change the page structure for [page type]"
"Move the navigation to the side"
"Make a two-column layout template"
"Add a new page layout"
"Create a template that shows [component] after the content"

When to Use

Adding a new page layout (sidebar, full-width, article, landing page)
Modifying where navigation, content, or footer appear on a page
Composing existing components into a new arrangement

Procedure

1. Check existing templates

Before creating a new template, check themes/default/templates/ — reuse or copy an existing one if close enough.

Name	Purpose
`default`	Standard page (nav, content, label footer)
`blank`	Minimal shell (content + scripts only)
`blog-post`	Article layout with byline header
`shop`	Shop layout with cart widget
`agent-info`	Two-column with sidebar (skills page)

2. Create the file

{{head}}
<body class="min-h-screen bg-gray-50">
    <div id="app" class="flex flex-col min-h-screen overflow-x-hidden">
        {{#if navigation}}{{navigation}}{{/if}}
        <main class="flex-grow max-w-4xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-8">
            {{content}}
        </main>
        {{#if label-footer}}{{label-footer}}{{/if}}
    </div>
    {{foot-scripts}}
</body>
</html>

3. Place tags

Required in every template:

{{head}} — opens <!DOCTYPE>, <html>, <head> with meta/CSS
{{content}} — compiled Markdown body
{{foot-scripts}} — closing <script> tags before </body>

Optional structural tags: {{navigation}}, {{label-footer}}, {{blog-header}}, {{cart}}, {{gadget}}

Data-driven tags (read from frontmatter): {{product}}, {{skill-cards}} — these return '' when the page's frontmatter lacks the required fields, so always use {{#if}} guards.

Optional scalar tags: {{title}}, {{description}}, {{author}}, {{category}}, {{formatted-date}}, {{reading-time}}

Fragments: {{category-pill}}, {{label-badges}}

Conditionals: Wrap optional tags so pages without data render cleanly:

{{#if navigation}}{{navigation}}{{/if}}

See references/tag-reference.md for full tag details.

4. Style with Tailwind

Use Tailwind utility classes directly in the HTML. No <style> tags or external CSS links.

5. Wire it up

Set Template: <name> in content frontmatter files that should use this layout.

6. Build

bun run build

Constraints

No <script> tags — client JS is bundled by Rspack from src/client/
No loops or complex logic — if you need loops, create a component
No hard-coded text content — page text comes from Markdown content
No hard-coded data — product prices, post titles come from frontmatter via tags
No reusable HTML patterns — if it appears in multiple templates, make it a component

References

references/tag-reference.md — Complete list of all available {{tag}} placeholders with descriptions
references/examples.md — Real template examples from the codebase